如何通过打字稿中的指令阻止 mat-select？

Question

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

Answer 1

您上面的代码适用于普通的 select，不适用于附加了 material 指令的 mat-select。

您通过 ViewChild 获得的元素实际上是 MatSelect 类型，它没有属性 nativeElement。所以在你的情况下未定义的是。

但是你不能只使用这样的东西吗？

在您的模板中

  <mat-select [disabled]=isDisabled >
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>

并且在您的组件中，您可以在特定条件下将“isDisabled”设置为 true 或 false。

Answer 2

问题是 mat-select 不是输入 select

如果您正在使用 ReactiveForms，您可以创建自己的指令。使用 FormControls

的 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 init 之后到达，将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);
  }

注意：stackblitz 已更新我们所有这些更改

如何通过打字稿中的指令阻止 mat-select？

How to block mat-select via directive in typescript?

dom

typescript

angular-directive

angular-material

angular