Angular 2 Reactive Forms：更新值更改的選擇列表

Question

我有一個使用ReactiveForms構建的Angular 2表單。 表單包含2個選擇元素。 第一個包含車輛制造清單。 從列表中選擇make時，第二個select元素應顯示屬於該make的模型。

我一直在玩valueChanges，但我似乎無法獲得第二個（子）選擇元素來包含所選make的模型。 當兩個字段都只是簡單的輸入元素時，對valueChanges做出反應實際上會更新模型輸入元素（使用模型FormControl上的setValue）。 有關簡單輸入字段，請參閱以下代碼示例

是否有可能通過Reactive Forms實現這一目標？

this.vehicleForm.controls['make'].valueChanges.subscribe((value) => {
  console.log(value);
  this.vehicleForm.controls['model'].setValue('Some Value');
});

在這種情況下，'value'實際上是所選的make對象。

Answer 1

您可以使用變量來存儲需要在其中顯示的模型，然后使用NgFor指令在選擇列表中顯示它們：

<select class="form-control" formControlName="models">
    <option *ngFor="let m of models" [value]="m">{{m}}</option>
</select>

在您的組件中：

this.vehicleForm.controls['make'].valueChanges.subscribe((value) => {
  console.log(value);
  this.models = ... // here you add models to variable models based on selected make
});

這樣，每次更改models變量時，這些更改都將反映在下拉列表中。

Answer 2

作為之前所說的簡單擴展，組件中表單的監聽器需要在初始化時去某處：

onInit(){
  //Fill in makes nd intialize the form
  onChange()
}

onChange(): void {
  this.vehicleForm.controls['make'].valueChanges.subscribe((value) => {
    console.log(value);
    this.models = ... // here you add models to variable models based on selected make
  });
}

這也是如何使用Reactive Model Form的一個很好的例子： https ： //codecraft.tv/courses/angular/forms/reactive-model-form/