禁用Angular 5输入字段的正确方法

Question

我有一个像这样创建的FormGroup：

form: FormGroup;

constructor(private _formBuilder: FormBuilder) { }

this.form = this._formBuilder.group({
  name: ['', Validators.required],
  email: ['', Validators.required, Validators.email]
});

当事件发生时，我想禁用这些输入，因此，在我添加的HTML中：

<input class="form-control" placeholder="Name" name="name" formControlName="name" [(ngModel)]="name" autocomplete="off" [disabled]="isDisabled" required>

<input class="form-control" placeholder="Email" name="email" formControlName="email" [(ngModel)]="email" email="true" autocomplete="off" [disabled]="isDisabled" required>

当发生上述事件时，isDisabled我将切换到哪里true？

可以想象，我收到消息：

看来您正在使用带有反应形式指令的Disabled属性。如果在组件类中设置此控件时将Disabled设置为true，则实际上将在DOM中为您设置disabled属性。我们建议使用这种方法来避免“检查后更改”错误。

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

因此，通过显示该警告的示例并进行了一些搜索，我发现我应该声明自己的控件，例如：

name: [{ value: '', disabled: this.isDisabled }, Validators.required]

问题是：当变量在两个变量之间切换时，它不会在禁用/启用之间切换true/false

如何使变量控制输入是启用还是禁用的正确方法？

我不想手动执行该操作（例如：），this.form.controls['name'].disable()因为它似乎不是一种非常被动的方式，因此我必须在大量方法中调用它。可能不是一个好习惯。

谢谢

Answer 1

您可以将变量的赋值更改为setter方法，以便：

set isDisabled(value: boolean) {
 this._isDisabled = value;
 if(value) {
  this.form.controls['name'].disable();
 } else {
    this.form.controls['name'].enable();
  }
}

Answer 2

一种解决方案是创建一个指令并使用此处所述的绑定

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 ) {
  }

}

然后

<input class="form-control" placeholder="Name" name="name" formControlName="name" autocomplete="off" [disableControl]="isDisabled" required>

笔记：

不适用于常春藤

Answer 3

在 Angular 7 中禁用文本框

<div class="center-content tp-spce-hdr">
  <div class="container">
    <div class="row mx-0 mt-4">
      <div class="col-12" style="padding-right: 700px;" >
          <div class="form-group">
              <label>Email</label>
                <input [disabled]="true" type="text" id="email" name="email" 
                [(ngModel)]="email" class="form-control">
          </div>
     </div>
   </div>
 </div>

Answer 4

禁用表单控件的正确方法。对于反应式表单，您永远不应该禁用模板中的输入。因此，在您调用的组件中的任何方法中，您都应该像这样禁用输入：

this.form.get('name').disable();

Answer 5

您可以在 ts 文件中使用此代码。

所有控件：

this.form.disable()
this.form.enable()

一些控件

this.form.get('first').disable()
this.form.get('first').enable()

或初始设置方法。

first: new FormControl({value: '', disabled: true}, Validators.required)

Answer 6

对于输入使用 [readonly] 而不是 [disabled] 它将起作用