angular - 角度表单控件禁用绑定不起作用

Question

我有一个在页面加载时禁用的表单控件。当用户单击按钮时，表单应该可以进行编辑。但是，当我切换禁用控件的属性时，什么也没有发生。

模板

<form [formGroup]='accountForm'>
  <md-input-container>
    <input mdInput formControlName='name' />
  </md-input-container>
  <button (click)='isEditing = !isEditing'>Edit</button>
</form>

零件

export class AccountComponent {
  private accountForm: FormGroup;
  private isEditing = false;
  private name: FormControl = new FormControl({ value: '', disabled: !isEditing; 

  constructor(
    formBuilder: FormBuilder
  ) {
    this.accountForm = formBuilder.group({
      'name': this.name
    });
  });
}

Answer 1

根据这里的文档：https ://angular.io/api/forms/FormControl

您还可以在实例化时使用表单状态对象初始化控件，其中包括值和控件是否被禁用。

所以设置这个：

private name: FormControl = new FormControl({ value: '', disabled: !isEditing;

仅设置控件的初始化方式。当 isEditing 的值发生变化时，它不会绑定它，也不会改变它。

有关更多信息，请参阅此问题：https ://github.com/angular/angular/issues/11271

（我刚刚意识到这与 Pankaj Parkar 在他们的评论中提供的链接相同。）

Answer 2

您可以使用enable/disable方法来更改禁用状态

模板.html

<button (click)="toggleDisable()">Edit</button>

组件.ts

toggleDisable() {
  this.accountForm.get('name')[!this.isEditing ? 'enable' : 'disable']();
  this.isEditing = !this.isEditing;
}

Plunker 示例

Answer 3

问题出在您的模板中。

您在 formControlName 上有错字。你有formControlName="Name"而不是formControlName="name". 注意帽子。

此外，isEditing 没有绑定到您的表单控件对象。

如果要根据isEditing值更改状态，则应执行以下操作：

<form [formGroup]='accountForm'>
  <md-input-container>
    <input mdInput formControlName='name' />
  </md-input-container>
  <button (click)='toggleEditMode()'>Edit</button>
</form>

请注意对方法的调用。

export class AccountComponent {
  private accountForm: FormGroup;
  private isEditing = false;
  private name: FormControl = new FormControl({ value: '', disabled:true; 

  constructor(formBuilder: FormBuilder) {
    this.accountForm = formBuilder.group({
      'name': this.name
    });
   }

   toggleEditMode() {
      this.isEditing = !this.isEditing;
      if(this.isEditing){
         this.name.enable();
      }else{
         this.name.disable();
   }
}