角反应形式 - 结合除其他另一个属性[值]

问题描述：

<select formControlName="incomeSourceId"> 
    <option value="" disabled >Select a source</option> 
    <option *ngFor="let source of primarySourceIncome" [value]="source.value">{{source.viewValue}}</option> 
</select>

我想显示取决于下拉选择/隐藏部分。到目前为止，我有：

<div class="row" [hidden]="applicationForm.get('incomeSourceId').value !== '1'"></div> 
<div class="row" [hidden]="applicationForm.get('incomeSourceId').value !== '2'"></div>

组件：

this.applicationForm = this.fb.group({  
    incomeSourceId: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(50)]] 

})

然而这工作，我的逻辑是基于价值，这是一个ID从服务器返回。我宁愿建立这个逻辑来检查{{source.viewValue}}，这不会改变。我如何将另一个财产绑定到<option>表单上？ NgModel不适用于表单组。

所以你的意思是说'[价值]'在这种情况下不起作用 –

正确。 [value] =“source.value”被设置为从服务器填充并发送到服务器的id。它可能会发生变化，而{{source.viewValue}}将保持不变，并且是一个字符串，例如“Employed” – Anthony

答案是否符合您的需求？ :) – Alex

答

<select formControlName="incomeSourceId"> 
    <option value="" disabled >Select a source</option> 
    <option *ngFor="let source of primarySourceIncome" [ngValue]="source.value">{{source.viewValue}}</option> // change to [ngValue] 
</select>

如果该值不是字符串[ngValue] = “...” 必须被使用。 [value] =“...”仅支持字符串。

答

你可以使用目前的primarySourceIncome的指数值：

<option *ngFor="let source of primarySourceIncome; index as i" [value]="i">{{source.viewValue}}</option>

如果选择输入的值是用于保存重要的，你保存在那之前你要寻找的是指数primarySourceIncome并将其值设置为实际应该设置的值。

答

可能看起来像一个解决方法，但我认为它仍然干净。

在您的选择中有一个(change)事件，我们只需使用find()在value中查找您阵列中的对象。这样我们就可以得到相应的viewValue到value。在这种情况下，当名称很长，我喜欢把它们存储在变量，以方便使用，让你的formcontrol，我会建立形式

this.idCtrl = this.applicationForm.get('incomeSourceId');

后这样做，那么在change事件被触发select，我们只分配从选择的对象viewValue给一个变量viewVal

findViewValue() { 
    this.viewVal = this.primarySourceIncome.find(x => 
    x.value == this.idCtrl.value).viewValue 
}

既然你提到viewValue不改变，我们这里只是用字符串文字模板。此外，我已经使用[ngSwitch]这里，看起来比较清爽，我认为:)因此，例如，模板看起来是这样的：

<div [ngSwitch]="viewVal"> 
    <div *ngSwitchCase="'Employee'">Employee</div> 
    <div *ngSwitchCase="'Manager'">Manager</div> 
</div>

而且这个拿走调用模板“不必要的” get请求。

角反应形式 - 结合除其他另一个属性[值]

相关推荐