如何在 HTML 代码中访问 FormControl 值

Question

我正在以编程方式更改表单“select”的值。

在表单字段中，您可以看到值已更改。但该元素"p"仍然是隐藏的。

如果您手动更改表单的值，元素“p”的可见性将正常工作。

预期结果：

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

请告诉我，可能是什么问题？

组件.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>

组件.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');
  }
}

堆栈闪电战示例

Answer 1

相反#template reference，您可以使用变量：

formGroup.controls['field1'].value

所以 HTML 代码：

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