Question

通过使用Angular7 CLI，我正在尝试读取mat-select的值，该值具有一个附加到FormControl的{{1}}。读取值后-它在FormGroup

处显示值

根据一种解决方案，我添加了[object object]。但这不是根据官方文件

组件代码

[(value)]="selectedOption"

实现了“提交”按钮来提交数据

返回组件：

purposeControl = new FormControl('', [Validators.required]);
purposeList: Purpose[] = [
    {id: '0', value: 'Self Care'},
    {id: '1', value: 'Caring for someone'},
];

validateVitalsFormGroup = new FormGroup({
  purposeControl: this.purposeControl,});

HTML代码是

onFormSubmit(): void {
  console.log('Purpose:' + 
this.validateVitalsFormGroup.get('purposeControl').value);
}

期望在HTML中选择的value-id，即0或1。

Answer 1

要选择值，您必须定义Purpose.id而不是简单的purpose，因为purpose是对象。

  <mat-option *ngFor="let purpose of purposeList" [value]="purpose.id"> //HERE USE purpose.id if you wanna to use Id as a value;
    {{purpose.value}} 
  </mat-option>

比您可以使用：

onFormSubmit(): void {
  console.log('Purpose:' + 
  this.validateVitalsFormGroup.get('purposeControl').value);
}

或者，如果您想使用目的对象作为整个值，则必须：

 onFormSubmit(): void {
  console.log('Purpose:' + 
  this.validateVitalsFormGroup.get('purposeControl').value.id);
  this.validateVitalsFormGroup.get('purposeControl').value.value);
}

读取组件

实现了“提交”按钮来提交数据

1 个答案: