首页 文章

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

提问于
浏览
2

我有一个使用 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 回答

  • 9

    您可以使用变量来存储需要在其中显示的模型,然后使用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变量时,这些更改都会反映在您的下拉列表中。

  • 0

    作为之前所说的简单扩展,组件中表单的监听器需要在初始化时去某处:

    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/

相关问题