Angular 如何禁用表单

[deepthan]

方法1： 直接设置为false

export class AppComponent {
  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      input: new FormControl(false),
    });
  }
}

方法2: 设置disabled 为 false

export class AppComponent {
  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      input: new FormControl({ disabled: true, value: '' }, []),
    });
  }

}

方法3 使用指令

指令ts

import { NgControl } from '@angular/forms';

@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {
  }

}

html中使用 [disableControl],当然也可以传变量进去

<form [formGroup]="form">
  <input formControlName="input1" placeholder="输入框1" [disableControl]="true">
  <input formControlName="input2" placeholder="输入框2" >
</form>

• ref