angular - Angular 6跟进:选项值中的[attr.disabled]禁用所有条目
问题描述
主题:Angular 6,反应式表单,下拉菜单,禁用一个选项:所有而不是仅一个预期值都被禁用,即使检查员说 disabled=false。
早些时候人们很友善地帮助我解决了我的问题:“ Angular 6 Reactive Form - Select options: disable previous selected options ”但是在我遇到障碍后它们似乎消失了,因此我提出了新问题:
为什么禁用所有选项值,而不仅仅是应该与语句匹配的选项值? [attr.disabled]="uplink2x === dropdown1Val"
(即使我硬编码nic0
而不是dropdown1Val
禁用所有选项)
组件.ts:
nicAdapters: any[] = ['nic0','nic1','nic2','nic3','nic4','nic5','nic6','nic7','nic8','nic9','nic10']
this.inputForm = this.fb.group({
upLinks: this.fb.group ({
NumberUplinks: ['2'],
uplinksMgmt: this.fb.group ({
uplink1: ['nic0'],
uplink2: ['nic1'],
uplink3: ['nic3'],
})
})
})
public changedVal(val) {
this.dropdown1Val = val;
}
组件.html:
<div class="select" formGroupName="uplinksMgmt">
<select formControlName="uplink1" id="uplink1Id" class="selectBox" (change)="changedVal($event.target.value)">
<option *ngFor="let uplink1x of nicAdapters" [ngValue]="uplink1x">{{uplink1x}}</option>
</select>
</div>
<div class="select" formGroupName="uplinksMgmt">
<select formControlName="uplink2" id="uplink2Id" class="selectBox" (change)="changedVal($event.target.value)">
<option *ngFor="let uplink2x of nicAdapters" [attr.disabled]="uplink2x === dropdown1Val" [ngValue]="uplink2x">{{uplink2x}}</option>
</select>
</div>
编辑: Stackblitz:https ://stackblitz.com/edit/clarity-light-theme-v012-irvrup
似乎disabled="true"
(或disabled="false"
就此而言)不适用于选项值。
解决方案
要禁用元素,只需使用属性disabled
而不是 true 或 false。要再次启用它,您需要删除该disabled
属性。在您的代码[attr.disabled]
中将值设置为 true 或 false,您需要的只是使用[disabled]
而不是[attr.disabled]
.
<option>Test FALSE</option>
<option disabled>Test TRUE</option>
<option *ngFor="let dropDownTestx of adapters"
[ngValue]="dropDownTestx"
[disabled]="dropDownTestx === 'vmnic2'">
{{dropDownTestx}}
</option>
在这里更新了你的 stackblitz 。
推荐阅读
- php - 在 Laravel 中添加基于域的路由的最佳实践是什么?
- mysql - 非法混合排序规则 (utf8mb4_general_ci,COERCIBLE) 和 (latin1_swedish_ci,IMPLICIT) 用于操作 '='
- php - CodeIgniter 没有路由到正确的模块
- javascript - 通过正则表达式阻止 div
- python - 为什么我们使用 strategy.num_replicas_in_sync
- ios - Xamarin.IOS(使用 Rider):每次加载 XCode 或运行模拟器时,创建的图像集都会消失
- android - Android 10 WiFi API 扫描可用网络
- flutter - 在按了几下继续按钮后,我的垂直步进器视图消失了
- chatbot - 是否可以创建基于用户输入进行自我训练的 rasa 2.0 聊天机器人?
- vb.net - 如何从异步任务中获取结果