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更改变量时,这些更改都会反映在您的下拉列表中.