Угловое 2: Отключить изменение входного сигнала не работает

Question

Up до «окончательного» 2.0 Угловое я сделал это:

<input type="text" formControlName="name" [disabled]="!showName"> 

Чтобы динамически отключить/включить форму входа.

После обновления Rc7 до 2.0 я получаю это предупреждение в окне консоли:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

Я изменил код, чтобы следовать этим инструкциям, как это:

this._userGroupUsersForm = this._formBuilder.group({ 
     'users': [{'', disabled: this.showName}, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(50), Validators.pattern("^[a-zA-ZåäöÅÄÖ 0-9_-]+$")])] 
    }); 

И это прекрасно работает начальная загрузка страницы, но я больше не могу переключаться со следующим статусом:

toggleName() : void { this.showName = !this.showName; } 

Как я могу это решить?

Примечание: Мой «старый» способ сделать это (путем установки [отключено]) также не работает.

Answer 1

Это должно работать

toggleName() : void { 
    let ctrl = this.form.get('name') 
    ctrl.enabled ? ctrl.disable() : ctrl.enable() 
} 

Answer 2

По состоянию на RC6 вам нужно вызвать функцию RC6 Forms: disabled attribute cannot be set dynamically anymore отключить().

Answer 3

Эта же проблема заставила меня потянуть мои волосы. Моим решением было использование интерполяции, а не односторонней привязки для обновления свойства. В вашем случае, вместо использования:

<input type="text" formControlName="name" [disabled]="!showName">

вы могли бы сделать:

<input type="text" formControlName="name" disabled="{{!showName}}">

Как только я сделал это, я был в состоянии динамически отключить/включить элементы в моих формах.

Надеюсь, это поможет!

Answer 4

Вы можете попробовать использовать атрибут readonly на своем входе.

инвалидов >>> чтения

<input type="text" formControlName="name" [readonly]="!showName">

Answer 5

Если кто-то прокручивает это и принятый ответ (Günters) не работает, как это было не для меня в первую очередь. Возможно, вы пытаетесь использовать его с пользовательским компонентом и не реализовали дополнительный способ setDisabledState(isDisabled: boolean) с интерфейса ControlValueAccessor.