Angular 2 Reactive Forms:更新值更改的选择列表

Question

我有一个用ReactiveForms构建的Angular 2表单。该表单包含两个选择元素。第一个文件包含汽车制造商的列表。当从列表中选择一个品牌时，第二个选择元素应该显示属于该品牌的型号。

我一直在尝试使用valueChanges，但似乎无法获得第二个(子) select元素来包含所选品牌的模型。当两个字段都只是简单的输入元素时，对valueChanges的反应实际上会更新模型输入元素(使用模型FormControl上的setValue )。有关简单输入字段，请参阅下面的代码示例。

有没有可能用反应式表单来实现这一点？

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

在本例中，“value”实际上是所选的make对象。

Answer 1

您可以使用variable存储需要在其中显示的模型，然后使用NgFor指令在select列表中显示它们：

<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
  });
}

这也是如何使用反应式模型表单的一个很好的例子：https://codecraft.tv/courses/angular/forms/reactive-model-form/