javascript - 基于下拉值的 Angular 相对形式需要更改

Question

我有一个 Angular 7 的响应式(Reactive)表单，其中包含 2 个作为级联下拉列表的下拉列表(选择)，问题是当我在您的推荐值更改中选择第一个选择框 [对象对象] 时，级联下拉列表不起作用

模板:

<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>值为空字符串 ""匹配您的响应式(Reactive)表单控件默认值，因为当前您的代码无法显示 "Select a Criteria"和"Select an Option"负载。您也可以删除 selected属性，因为这是由 Angular 根据当前 react 形式值有效完成的:

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

<!-- your other stuff -->

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

希望有帮助!