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方法更改禁用状态

<强> template.html

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

<强> component.ts

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

<强> Plunker Example

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();
   }
}

Angular表单控件禁用绑定不起作用

3 个答案: