Question

我在角度7中有一个反应式表单，其中包含2个下拉菜单（选择）作为级联下拉菜单，当我为引用{{ 3}}

模板：

<form [formGroup]="reportForm">
   <div class='col-12 col-sm-6'>
      <div class="form-group " >
         <label >Transformation Type</label>
         <select name="select" formControlName="transformationType" class="form-control"  placeholder="Select User Type" >
            <option value="0" disabled selected>Select a Criteria</option>
            <option *ngFor="let item of datasources" [value]="item">{{item.title}}</option>
         </select>
      </div>
   </div>
   <div class='col-12 col-sm-6'>
      <div class="form-group " >
         <label >User Type:</label>
         <select formControlName="whereInput" class="form-control">
            <option value="0"  selected>Select an Option</option>
            <option *ngFor="let item of units" [value]="item">{{item}}</option>
         </select>
      </div>
   </div>
</form>

组件：

this.ifscSingle.controls.transformationType.valueChanges.subscribe(data => {
  console.log(data);
})

Answer 1

如果您尝试对每个value元素使用复杂的<option>类型，例如object，请使用[ngValue]而不是[value]：

<form [formGroup]="reportForm">
   <div class='col-12 col-sm-6'>
      <div class="form-group " >
         <label >Transformation Type</label>
         <select name="select" formControlName="transformationType" class="form-control"  placeholder="Select User Type" >
            <option value="0" disabled selected>Select a Criteria</option>
            <option *ngFor="let item of datasources" [ngValue]="item">{{item.title}}</option>
         </select>
      </div>
   </div>
   <div class='col-12 col-sm-6'>
      <div class="form-group " >
         <label >User Type:</label>
         <select formControlName="whereInput" class="form-control">
            <option value="0"  selected>Select an Option</option>
            <option *ngFor="let item of units" [ngValue]="item">{{item}}</option>
         </select>
      </div>
   </div>
</form>

这里是example的动作。

作为旁注，我建议将默认<option>设置为空字符串""，以匹配您的反应形式控件的默认值，因为当前您的代码无法显示"Select a Criteria"和"Select an Option"已加载。您还可以删除selected属性，因为Angular可以有效地完成此操作，具体取决于当前的反应形式值：

<option value="">Select a Criteria</option>

<!-- your other stuff -->

<option value="">Select an Option</option>

希望有帮助！

Answer 2

在创建反应形式以反映更改之后，您需要修补值。

例如：

this.reportForm.patchValue({
  formControlName1: myValue1, 
  // formControlName2: myValue2 (can be omitted)
});

在您的方案中，一旦更改了转换类型的值，就需要修补reportForm。

 this.reportForm.get('transformationType').valueChanges.subscribe(item => {

      this.units = item.units
      this.reportForm.patchValue({
      whereInput: this.units, 
});

    })

在HTML代码中，使用value代替ngValue。

<select name="select" formControlName="transformationType" class="form-control"  placeholder="Select User Type" >
            <option value="0" disabled selected>Select a Criteria</option>
            <option *ngFor="let item of datasources" [ngValue]="item">{{item.title}}</option>
         </select>

这是您的问题的有效解决方案：

Working demo

基于下拉的角度相对形式需要更改的值

2 个答案: