如何通过打字稿中的指令阻止垫选择？

问题描述

我正在使用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);
  }

注意：我们对所有这些更改进行了堆栈闪电更新