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>

live link

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()方法。

Answer 2

在ts文件中，使用一个变量“ gendervalue”，并根据需要为它分配默认值，无论是男还是女喜欢在ts文件中

 gendervalue = 'male';

在HTML文件中表单值：{{sexvalue}}

选中this page，以获取更多参考。

Answer 3

如果您不需要FormBuilder，也可以在使用FormGroup创建表单时设置默认选择值。

例如，设置性别的默认值：

    const genders = ['female','male']

    this.reactiveform = new FormGroup({
      gender: new FormControl(genders[0])
    });

patchValue（）或setValue（）-如果要在表单创建后稍后设置选择值，也是很好的解决方案。

如何使用Reactive表单在材料中选择默认选项？

3 个答案: