Как получить доступ к значению FormControl в HTML-коде

Question

Я программно изменяю значение формы «выбрать».

В поле формы вы можете видеть, что значение изменилось.Но элемент "p" все еще скрыт.

Если вы вручную измените значение формы, видимость элемента "p" будет работать правильно.

Ожидаемый результат:

The <p> tag should be visible if the value of `field1` FormControl is equal to `1`.

Скажите, пожалуйста, в чем может быть проблема?

component.html

<form [formGroup]="formGroup">
  <mat-form-field class="mb-4" fxFlex="100">
      <mat-select #field1 formControlName="field1" placeholder="Data type" required>
        <mat-option value="0" selected>Boolean</mat-option>
        <mat-option value="1">Int</mat-option>
        <mat-option value="2">Double</mat-option>
        <mat-option value="3">String</mat-option>
        <mat-option value="4">Byte array</mat-option>
        <mat-option value="5">Object</mat-option>
      </mat-select>
    </mat-form-field>
</form>

<p *ngIf="field1.value === '1'">Integer</p>

<button mat-raised-button color="primary" (click)="onClick()">Set 'Int'</button>

component.ts

export interface Item {
  value: string;
  viewValue: string;
}

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  public data: Item[] = [
    {value: '1', viewValue: 'Option 1'},
    {value: '2', viewValue: 'Option 2'},
    {value: '3', viewValue: 'Option 3'}
  ];
  public formGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder){

  }

  ngOnInit() {
    this.formGroup = this._formBuilder.group({
      field1: [1, null]
    });
  }

  onClick(){
    this.formGroup.controls.field1.setValue('1');
  }
}

Пример Stackblitz

Answer 1

Вместо #template reference переменная, вы можете использовать:

formGroup.controls['field1'].value

, поэтому код HTML:

<p *ngIf="formGroup.controls['field1'].value === '1'">Integer</p>