![](/img/trans.png)
[英]Angular Reactive form disable specific options in p-dropdown
[英]Dynamically disable a dropdown of reactive form
我正在尝试禁用使用 ul 和 li 构建的下拉列表,我必须使用 ui 和 li 而不是 select 来满足反应形式内的要求。
Html
<ul data-dropdown data-value class="bx--dropdown" tabindex="0">
<li class="bx--dropdown-text">Validation type</li>
<li>
<ul class="bx--dropdown-list">
<li data-option [attr.data-value]="input" class="bx--dropdown-item" *ngFor="let input of validationTypes;">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">{{input}}</a>
</li>
</ul>
</li>
</ul>
ts
let fieldSetGroup = <FormArray>this.createTemplateForm.get("fieldSets");
fieldSetGroup.push(this.fb.group({
key: ["", Validators.required],
"type": ["", Validators.required],
mandatory : ["", Validators.required],
validationType: [""]
}));
let fg = <FormGroup> fieldSetGroup.controls[id];
if (fg.controls["key"] === "Apple") {
fg.controls["validationType"].disable();
}
尝试在 ul 和 li 上添加 formControlName ...没有工作...如何处理这种情况?
您有 2 个选项,要么使用反应形式,要么使用 css class
使用响应式表单将formControlname
添加到您的组件
<ul data-dropdown data-value class="bx--dropdown" tabindex="0" formControlName="validationType">
<li class="bx--dropdown-text">Validation type</li>
<li>
<ul class="bx--dropdown-list">
<li data-option [attr.data-value]="input" class="bx--dropdown-item" *ngFor="let input of validationTypes;">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">{{input}}</a>
</li>
</ul>
</li>
</ul>
并在您的方法中添加以下代码(您想要禁用它的地方)
const ctrl = this.fg.get('validationType');
ctrl.disable();
使用 css 来实现这一点
将此添加到您的组件中 css
.disabled{
pointer-events:none;
opacity:0.4;
}
并在您的 html 中将此 calss 添加到您的元素
<ul data-dropdown data-value class="bx--dropdown" tabindex="0" [class.disabled]="fg.invalid">
<li class="bx--dropdown-text">Validation type</li>
<li>
<ul class="bx--dropdown-list">
<li data-option [attr.data-value]="input" class="bx--dropdown-item" *ngFor="let input of validationTypes;">
<a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">{{input}}</a>
</li>
</ul>
</li>
</ul>
请用您的验证条件替换fg.invalid
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.