Angular 2: отключить изменение ввода

До "final" 2.0 из Angular Я сделал это:

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

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

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

Похоже, вы используете атрибут disabled с директивой реактивной формы. Если вы отключили значение true       когда вы настроите этот элемент управления в своем классе компонента, атрибут disabled будет фактически установлен в DOM для       вы. Мы рекомендуем использовать этот подход, чтобы избежать ошибок "после проверки".

Я изменил свой код, чтобы выполнить следующие инструкции:

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

Как это решить?

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

вы можете сделать:

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

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

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

Ответ 3

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

отключено → > readonly

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

Ответ 5

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