角度窗體控件禁用綁定不起作用

我有一個表單控件，當頁面加載時我禁用。當用戶點擊一個按鈕時，表單應該被啓用進行編輯。但是，當我切換禁用控件的屬性時，什麼都不會發生。角度窗體控件禁用綁定不起作用

模板

<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

角度窗體控件禁用綁定不起作用

回答

相關問題