如何使用反应形式在材料中选择默认选项？

Question

我有使用反应式的简单形式，我可以选择使用模板驱动形式的选项，但我不能使用反应式形式做同样的事情。这里做错了什么

<form [formGroup]="reactiveform">
<mat-form-field>
  <mat-select placeholder="Gender" [(value)]="gendervalue" formControlName="gender">
    <mat-option value="female">Female</mat-option>
    <mat-option value="male">Male</mat-option>
  </mat-select>
</mat-form-field>
</form>

<p>Form value: {{ reactiveform.value | json }}</p>

直播链接。

Answer 1

使用你应该在表单组未通过模板中的输入和输出的设定值。相反，您应该使用打字稿文件中的FormGroup对象对表单的数据模型进行所有操作。如果您使用FormBuilder构建表单组，则可以像这样设置默认值：

import {FormBuilder} from '@angular/forms';

constructor(private fb: FormBuilder, ...) {
  ...
}

ngOnInit() {
  this.reactiveForm = this.fb.group({
    ...
    gender: myDefaultGender,
    ...
  });
}

然后您可以通过.patchValue()更新该值

this.reactiveForm.patchValue({ 'gender': myNewGender });

参数映射可能包含不止一个控件的值。如果您想一次设置所有值，您还可以使用.setValue()方法。