角度窗体控件禁用绑定不起作用

我有一个表单控件，当页面加载时我禁用。当用户点击一个按钮时，表单应该被启用进行编辑。但是，当我切换禁用控件的属性时，什么都不会发生。角度窗体控件禁用绑定不起作用

模板

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

来源

2017-07-31 efarley

有趣的GitHub [主题]（https://github.com/angular/angular/issues/11271#issuecomment-289806196）这里 –

this.isEditing ...？ – Thibs

[Angular 2：Disable input change not working]可能重复（https://stackoverflow.com/questions/39504565/angular-2-disable-input-change-not-working） – Alex

您可以使用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

来源

2017-07-31 20:40:23 yurzui

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

也可初始化与形式状态对象控制实例化，其中包括值和是否禁用控件。

所以设置这个：

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

只设置控制如何初始化。它是而不是绑定它，也不会随着isEditing的值更改而更改它。

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

（我刚刚意识到的是，潘卡Parkar在他们发表了相同的链接。）

来源

2017-07-31 20:25:25 DeborahK

谢谢。我最初在模板中尝试绑定到禁用模式，但会导致控制台警告，输入未按预期禁用，并且更新该值不会更改禁用状态。警告消息：“看起来你正在使用带有反应形式指令的disabled属性，如果在组件类中设置此控件时将disabled设置为true，那么disabled属性实际上将设置在DOM中我们建议使用这种方法来避免'检查后更改'错误。“ – efarley

这不是它的工作方式。使用反应形式，您不能从模板 –

的问题是在您的模板。

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

来源

2017-07-31 20:35:33

设置禁用属性哦，你是正确的，但这只是输入上面的代码错误。我的实际代码没有那个错字。我只是打了一个我想要做的事情的例子。 – efarley

角度窗体控件禁用绑定不起作用

回答

相关问题