我有一个使用 ReactiveForms 构建的 Angular 2 表单。表单包含 2 个选择元素。第一个包含车辆制造清单。从列表中选择 make 时,第二个 select 元素应显示属于该 make 的模型。
我一直在玩 valueChanges,但我似乎无法获得 second(child)选择元素来包含所选 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 对象。
2 回答
您可以使用变量来存储需要在其中显示的模型,然后使用
NgFor
指令在选择列表中显示它们:在您的组件中:
这样,每次更改
models
变量时,这些更改都会反映在您的下拉列表中。作为之前所说的简单扩展,组件中表单的监听器需要在初始化时去某处:
这也是如何使用 Reactive Model Form 的一个很好的例子:https://codecraft.tv/courses/angular/forms/reactive-model-form/