如何解决如何通过打字稿中的指令阻止垫选择?
我正在使用Angular 9 /打字稿。我想在某些条件下禁用某些表单元素。我发现了这样一个good example,作者禁用了所有元素。我编辑了他的例子。一切都很好,但是MAT-SELECT未被禁用,并且仍然是唯一的活动元素。请告诉我如何禁用它?
文章示例:
private disableElement(element: any) {
if (this.appDisable) {
if (!element.hasAttribute(DISABLED)) {
this.renderer.setAttribute(element,APP_DISABLED,'');
this.renderer.setAttribute(element,DISABLED,'true');
// disabling anchor tab keyboard event
if (element.tagName.toLowerCase() === TAG_ANCHOR) {
this.renderer.setAttribute(element,TAB_INDEX,'-1');
}
}
} else {
if (element.hasAttribute(APP_DISABLED)) {
if (element.getAttribute('disabled') !== '') {
element.removeAttribute(DISABLED);
}
element.removeAttribute(APP_DISABLED);
if (element.tagName.toLowerCase() === TAG_ANCHOR) {
element.removeAttribute(TAB_INDEX);
}
}
}
if (element.children) {
for (let ele of element.children) {
this.disableElement(ele);
}
}
}
我的代码:
private disableElement(element: any) {
if (this.appDisable) {
if (element.tagName == "INPUT" || element.tagName == "MAT-SELECT" || element.tagName == "BUTTON") {
if (!element.hasAttribute(DISABLED)) {
this.renderer.setAttribute(element,'');
this.renderer.setAttribute(element,'true');
// disabling anchor tab keyboard event
if (element.tagName.toLowerCase() === TAG_ANCHOR) {
this.renderer.setAttribute(element,'-1');
}
}
}
} else {
if (element.tagName == "INPUT" || element.tagName == "MAT-SELECT" || element.tagName == "BUTTON") {
if (element.hasAttribute(APP_DISABLED)) {
if (element.getAttribute('disabled') !== '') {
element.removeAttribute(DISABLED);
}
element.removeAttribute(APP_DISABLED);
if (element.tagName.toLowerCase() === TAG_ANCHOR) {
element.removeAttribute(TAB_INDEX);
}
}
}
}
if (element.children) {
for (let ele of element.children) {
this.disableElement(ele);
}
}
}
解决方法
您上面的代码适用于常规选择,而不适用于附加了材料指令的垫选。
与ViewChild一起获得的元素实际上是MatSelect类型,它没有属性nativeElement。因此,根据您的情况未定义的是。
但是您不能只使用以下内容吗??
在您的模板中
<mat-select [disabled]=isDisabled >
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
,并且在您的组件中,可以在特定条件下将“ isDisabled”设置为true或false。
,问题在于,垫子选择不是输入选择
如果您正在使用ReactiveForms,则可以创建自己的指令。使用FormControl的enable()
和disable()
方法的人
类似的指令
import {Directive,Input,} from "@angular/core";
import { FormGroupDirective } from "@angular/forms";
@Directive({
selector: "[appDisable]"
})
export class DisableDirective {
constructor(private fgd: FormGroupDirective) {}
@Input() set appDisable(value: boolean) {
Object.keys(this.fgd.form.controls).forEach(x => {
const control = this.fgd.form.get(x);
if (control) {
if (value) control.disable();
else control.enable();
}
});
}
}
您可以使用表格
<form [formGroup]="form" [appDisable]="disabled">
<mat-form-field appearance="fill">
<mat-label>Favorite food</mat-label>
<mat-select formControlName="food">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
<input matInput formControlName="name"/>
</mat-form-field>
</form>
<button mat-button (click)="disabled=!disabled">{{disabled?'Enable!':'Disable!'}}</button>
请参阅stackblitz
更新如何到达按钮或如何到达NgControls 如果需要到达按钮或NgControl,则需要使用ContentChild和ContenChildren。我们可以声明两个变量
@ContentChild(MatButton) button: MatButton;
@ContentChildren(NgControl,{ descendants: true }) controls: QueryList<NgControl>;
要获取ContentChild,我们只能在ngAfterView初始化之后才能到达,将setter中的代码转换为函数。好吧,我们更改了功能,所以,因为我们不使用反应式窗体,我们也禁用了控件。
setEnabled(value: boolean) {
if (this.fgd) { //we are using with a [formGroup]
Object.keys(this.fgd.form.controls).forEach(x => {
const control = this.fgd.form.get(x);
if (control) {
if (value) control.disable();
else control.enable();
}
});
} else { //we are not using Reactive Forms
if (this.controls) {
this.controls.forEach(x => {
const control = x.ngControl;
if (control) {
if (value) control.disable();
else control.enable();
}
});
}
}
//to disabled/enabled the submitButton
if (this.button) this.button.disabled = value;
}
好吧,我们需要在ngAfterViewInit和setter中调用该函数,并使用新的私有变量_disable
@Input() set appDisable(value: boolean) {
this._disable = value;
this.setEnabled(value);
}
ngAfterViewInit() {
this.setEnabled(this._disable);
}
注意:我们对所有这些更改进行了堆栈闪电更新
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。