如何使用FormControl在Angular中为表单设置值

Question

<div class="form-group" [formGroup]="gGroup">
  <label for="grouplabel">Group</label>
  <select formControlName="groupControl" [(ngModel)]="groupobj" (ngModelChange)="onSelectGroup($event)" id="group" class="form-control">
        <option>Select</option>
        <option *ngFor="let group of groups" [selected]="current_group === group.name">{{group.name}}</option>
  </select>
</div>

如何在组件中动态设置 <select> 字段的值为“Select”？

我查看了文档https://angular.io/api/forms/FormControlName#use-with-ngmodel，但仍然找不到可以帮助我的示例。

尝试： this.gGroup.get('groupControl').setValue('Select');

- chris

---

尝试更改 this.groupobj 的值。 - JCAguilera

Answer 1

我想出了一种方法来做到这一点：

<form #f="ngForm">
  <select name="option" ngModel>
    <option value="" disabled>Choose an option</option>
    <option *ngFor="let option of options" [ngValue]="option">
      {{ option.title }}
    </option>
  </select>
</form>

this.f.controls.state.setValue(this.options[0]);

请看我制作的示例:

https://stackblitz.com/edit/angular-xpeth8

这个链接是一个关于 Angular 的示例。

- JCAguilera

Answer 2

不建议在同一表单控件中混合使用响应式表单和模板驱动表单，即formGroup/formControlName和ngModel绑定。

如果我没记错的话，这在Angular 6已经被弃用，将在Angular 7中删除。简而言之，如果需要处理动态表单渲染和复杂表单验证（跨字段验证、自定义验证器等），请使用响应式表单；如果需要进行简单的表单验证，请使用模板驱动表单。

回到您的问题。在响应式表单中（在您的特定示例中），可以通过以下方式设置值：

this.gGroup.controls[this.groupControl].setValue()

请查看以下链接：https://stackblitz.com/edit/angular-kskgbp。希望这有所帮助。

- Superiom

---

如何检查Angular 6中弃用使用ngModel在响应式表单中的情况。 - Soumya Gangamwar

我不太确定。它必须在发布说明中提到。据我记得，每当我同时使用这两种类型的表单时，我都会收到“控制台警告”，提示它将在下一个版本中被弃用（那是Angular 7）。 - Superiom

当您不确定控件实际上是否附加到FormGroup时，请使用以下内容：this.gGroup.contains('controlName') && this.gGroup.get('controlName').setValue('示例数据'); - Mohan Ram

get('controlName') 工作得非常完美。Mohan Ram 是正确的。 - Marc Roussel

Answer 3

如果我们想设置formGroup内所有formControl的值，可以使用setValue；如果我们想要设置formGroup内任意一个formControl的值，则可以使用patchValue。 setValue（假设formGroup有2个formControl）：

formgroup.setValue({name: ‘Mocrosoft’, age: ‘25’});

patchValue

formgroup.patchValue({name:’Mocrosoft’});

或者你可以这样做，

this.yourFormgroup.get("yourFormControl").setValue("yourValue");

- NnN

---

当使用 formgroup.setValue({name: ‘Mocrosoft’, age: ‘25’}); 时，我们必须确保所有的值都已提供，否则剩余的表单控件将会抛出 Must supply a value for form control with name: otherFormcontrolNames 错误。这种方式不能用于更新单个控件的值。 - PaperinFlames

Answer 4

试一下我已经创建的以下示例。 HTML：

  <form [formGroup]="myform" (ngSubmit)="onSubmit()">
        <label for="grouplabel">Animals</label>
        <select formControlName="animalName" class="form-control">
            <option *ngFor="let animal of animals">{{animal.name}}</option>
      </select>
    </form>

Typescript：

  myform: FormGroup;
  animals: String[] = ["cat", "cow", "elephant"];
  constructor(private formBuilder: FormBuilder) {
   this.myform = this.formBuilder.group({
      animalName : [""]
    })`enter code here`
  }

实时示例：https://stackblitz.com/edit/angular-1bmzur

- Dilshan