如何使用 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

希望這可以幫助。

Answer 3

如果我們要設定值的所有formControl一個內部formGroup那么你就可以去setValue或者如果我們要設定值的的任何一個formControl一個內部formGroup然后我們可以去patchValue

setValue （假設 formGroup 有 2 個 formControls）

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

補丁值

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

或者你可以這樣做，

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

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>

打字稿：

  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