1

我正在尝试创建一个自定义指令来禁用表单字段，但它不起作用。

import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appCustomDisable]',
  })
 export class CustomDisableDirective {
@Input() appCustomDisable: boolean;
constructor(private el: ElementRef, private renderer: Renderer2) {}

ngOnChanges() {
if (this.appCustomDisable) {
  this.renderer.setProperty(this.el.nativeElement, 'disabled', 
this.appCustomDisable);
} else {
  this.renderer.setProperty(this.el.nativeElement, 'disabled', 
this.appCustomDisable);
 }
}
}

我还尝试使用来自“@angular/core”的渲染进行上述操作

 this.renderer.setElementAttribute(this.el.nativeElement, 'disabled', 
'true');

在 app.component.html 我正在使用 [appCustomDisable]="myVar"

Stackblitz 链接 https://stackblitz.com/edit/angular-lxb661

4

2 回答 2

1

由于您使用的是 MatInput，因此您的代码将无法正常工作。但是您可以像这样简单地调整它：

import { Directive, ElementRef, Input, Renderer2, Optional, S } from '@angular/core';
import { MatInput } from '@angular/material'

@Directive({
  selector: '[appCustomDisable]'
})
export class CustomDisableDirective {
  @Input() appCustomDisable: string;
  constructor(@Optional() private matInput: MatInput, private el: ElementRef, private renderer: Renderer2) { }

  ngOnChanges() {
    // Find Input
    let input: any;
    if (this.matInput) {
      // It's a Material Input
      input = this.matInput;
    }
    else {
      // Its a native Input
      if (this.el.nativeElement && this.el.nativeElement.tagName && this.el.nativeElement.tagName === "INPUT") {
        input = this.el.nativeElement;
      } else {
      // No Input found
      // return or throw error
      return;
      }
    }

    if (this.appCustomDisable === 'hide') {
      this.renderer.setStyle(this.el.nativeElement, 'display', 'none')
    } else if (this.appCustomDisable === 'view') {
     console.log(input);
     input.disabled = true;
    }
    else {
      this.renderer.setStyle(this.el.nativeElement, 'display', 'block')
    }
  }

}

于 2019-03-25T14:36:30.377 回答
1

显然，您要禁用的是同一元素上存在的 MatInput 指令。因此，只需将其注入到您的组件中，然后禁用它：

import { Directive, Input } from '@angular/core';
import { MatInput } from '@angular/material';

@Directive({
  selector: '[appCustomDisable]'
})
export class CustomDisableDirective {

    @Input() appCustomDisable : boolean;
    constructor(private matInput: MatInput) {}

    ngOnChanges() {
        this.matInput.disabled = this.appCustomDisable;
    }

}

演示

于 2019-03-25T14:37:11.183 回答