如何使用FormControl在Angular 6中将值设置为Form

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>字段的值设置为“ 动态选择 ”？

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

尝试：

this.gGroup.get('groupControl').setValue('Select');

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

Answer 2

将 Reactive Forms 和 Template Driven Forms 混合在一起并不是一个好主意，即 formGroup/formControlName 和 ngModel 绑定在同一个表单控件中。

如果我没记错的话，这在 Angular 6 中已被弃用，并将在 Angular 7 中删除。至少这是我几天前在控制台中得到的警告。简而言之，如果您需要处理动态表单渲染和复杂表单验证（跨字段验证、自定义验证器等），请使用响应式表单，并使用模板驱动表单来处理需要简单验证的简单表单。

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

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

请检查以下链接：https : //stackblitz.com/edit/angular-kskgbp

希望这可以帮助。