Angular 如何在HTML代码中访问FormControl值

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

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

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

预期结果：

相反，您可以使用：

formGroup.controls['field1'].value

因此，HTML代码：

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

---

你想要什么？单击按钮时应该可以看到？您可以使用：formGroup.value.field1==='1'@PrashantPimpale绑定到表单工作，我选中了它。我不明白为什么绑定到mat select元素不起作用。

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

formGroup.controls['field1'].value

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