angular6: как переключаться между скрытием и отображением элемента управления формы

Question

Я не могу переключаться между скрытием и отображением элемента управления с помощью выбора, встроенного в реактивную форму Angular6.Я хочу, чтобы когда пользователь выбирал option3 в контроллере формы garde, показывался controll формы имени.

this.form = this.fb.group({
  id: [null, Validators.compose([Validators.required])],
  name: [null, Validators.compose([Validators.required])],
  grade: [null, Validators.compose([Validators.required])],

});

.html

<mat-form-field class="mb-1">
<input  matInput  " [formControl]="form.controls['id']">
</mat-form-field>


<mat-form-field class="mb-1">
<mat-select  [formControl]="form.controls['grade']">

<mat-option value="option1">option1</mat-option>
<mat-option value="option2">option2</mat-option>
<mat-option value="option3">option3</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field class="mb-1">
<input  matInput  " [formControl]="form.controls['name']">
</mat-form-field>

Answer 1

Самым быстрым решением было бы, хотя и не очень элегантно:

<mat-form-field class="mb-1" *ngIf="form.controls['grade'].value == 'option3'">
  <input  matInput [formControl]="form.controls['name']">
</mat-form-field>