在 angular 的反應 forms 中處理 select 標簽的 onSelect 數據的最佳方法是什么

Question

我想知道處理以下情況的最佳方法是什么。 我有一個包含幾個字段的表單，其中包括 select 標簽。

 <form [formGroup]="myForm"> <select formControlName="" > <option *ngFor="let c of countries" value="c" (select)="onSelect(c)">{{c.name}}</option> </select> </form> export class AppComponent { constructor(private FormBuilder: FormBuilder) {} public myForm: FormGroup; countries = [ { id: 1, name: "United States" }, { id: 2, name: "Australia" }, { id: 3, name: "Canada" }, { id: 4, name: "Brazil" }, { id: 5, name: "England" }, ]; ngOnInit() { this.myForm = this.FormBuilder.group({ country: new FormGroup({ id: new FormControl("", []), name: new FormControl("", []), }), }); } onSelect(option) { //tried this but not updating the myForm.value this.myForm.controls['country'] = this.fb.group({ id: new FormControl(event.detail.id, []), name: new FormControl(event.detail.name, []) }); } }

所以我的問題是我應該如何 map 將所選值傳遞給 formObject。 並且想知道在 onSelect(){} 中更新 myForm 的方法如何在 select 標記中指定 formControlName 或者有任何簡化的方法來執行此操作。

Answer 1

使用this.myForm.get("country").valueChanges檢測 select 下拉菜單的變化。

試試這樣：

.ts

ngOnInit() {
   this.myForm = this.FormBuilder.group({
      country: new FormControl(null)
   });

   this.myForm.get("country").valueChanges.subscribe(value => {
      console.log(value);
   });
 }

.html

<form [formGroup]="myForm">
  <select formControlName="country" >
    <option *ngFor="let c of countries" [value]="c.id"  >{{c.name}}</option>
  </select>
</form>

工作演示

Answer 2

您可以綁定到change select標記的事件並將myForm.value.country作為參數發送。 嘗試以下

Controller

export class AppComponent implements OnInit {
  myForm : FormGroup;
  countries = [
    {id: 1, name: "United States"},
    {id: 2, name: "Australia"},
    {id: 3, name: "Canada"},
    {id: 4, name: "Brazil"},
    {id: 5, name: "England"}
  ];

  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit(){
    this.myForm = this._formBuilder.group({
      country: new FormGroup({
        id: new FormControl('', []),
        name: new FormControl('', [])
      })
    });
  }

  compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
  }

  onChange(option: any){
    console.log(option);
  }
}

模板

<form [formGroup]="myForm">
  <select [compareWith]="compareFn" formControlName="country" (change)="onChange(myForm.value.country)">
    <option *ngFor="let country of countries" [ngValue]="country">
      {{ country.name }}
    </option>
  </select>
</form>

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

工作示例： Stackblitz

順便說一句，您有兩個表單控件id和name ，它們未綁定到模板中的任何元素。 所以你會得到錯誤control.registerOnChange is not a function 。 見這里。

Answer 3

這是執行此操作的兩種方法，最適合大多數情況： 1- 使用如下更改方法：

(change)="onSelect(c)"

2-像這樣使用 ngModelChange 方法：

(ngModelChange)="onSelect(c)"

還有其他方法可以做到這一點，但這取決於您想要實現的目標。

僅當您使用 select 任何選項時才會調用更改方法。

ngModelChange 將在您的模型值發生更改時隨時調用。 這通常在您有依賴字段時使用。 這應該小心使用。 任何可以使用 change 方法完成的事情都應該只使用 change 方法來完成。

假設您想通過 API 調用填充值，您可以顯式綁定每個值，也可以使用 [compareWith]

所以這取決於，一切都因某種目的而存在。 這非常簡單，但是如果您希望看到任何示例，請告訴我。

Answer 4

setValue 工作下面的一個是更新控件但不是 myForm.value object

 onSelect(option) { //tried this but not updating the myForm.value this.myForm.controls['country'] = this.fb.group({ id: new FormControl(event.detail.id, []), name: new FormControl(event.detail.name, []) }); } the below code worked onSelect(option) { this.myForm.controls['country'].setValue({ id: event.detail.value, name: event.detail.description }) }