[英]Dynamically disable a dropdown of reactive form
I'm trying disable a dropdown built with ul and li i have to use ui and li instead of select for requirement inside a reactive form.我正在尝试禁用使用 ul 和 li 构建的下拉列表,我必须使用 ui 和 li 而不是 select 来满足反应形式内的要求。
Html 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 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();
}
tried adding formControlName on both ul and li...didnt work...How to handle this case?尝试在 ul 和 li 上添加 formControlName ...没有工作...如何处理这种情况?
you have 2 options either use reactive form or use css class您有 2 个选项,要么使用反应形式,要么使用 css class
for useing reactive form add formControlname
to your component使用响应式表单将
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>
and add below code in your method (where you WANT TO disable it)并在您的方法中添加以下代码(您想要禁用它的地方)
const ctrl = this.fg.get('validationType');
ctrl.disable();
To achice this using css使用 css 来实现这一点
add this in your component css将此添加到您的组件中 css
.disabled{
pointer-events:none;
opacity:0.4;
}
and in ur html add this calss to your element并在您的 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>
Please replace fg.invalid
with your validetion condition请用您的验证条件替换
fg.invalid
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.