正确禁用 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，则 disabled 属性实际上会在 DOM 中为您设置。我们建议使用这种方法来避免“检查后更改”错误。

>    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() ），因为它似乎不是一种非常被动的方式，我必须在大量方法中调用它。可能不是一个好习惯。

谢谢

原文由 João Ghignatti 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将变量的分配更改为 setter 方法，以便您拥有：

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

原文由 Bruno Silva 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

笔记：

不适用于常春藤

原文由 Reza 发布，翻译遵循 CC BY-SA 4.0 许可协议