web-dev-qa-db-ja.com

Angular 2：入力の変更を無効にしない

Angularの「最終」2.0まで、これを実行しました。

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

フォーム入力を動的に無効/有効にします。

Rc7から2.0にアップグレードした後、コンソールウィンドウに次の警告が表示されます。

リアクティブフォームディレクティブでdisabled属性を使用しているようです。コンポーネントクラスでこのコントロールを設定するときにdisabledをtrueに設定すると、実際にはDOMでdisabled属性が設定されます。 「チェック後の変更」エラーを回避するために、このアプローチを使用することをお勧めします。

次のような指示に従うようにコードを変更しました。

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

これをどうやって解決しますか？

注：（[無効]を設定することで）これを行う「古い」方法は、もう機能しません。

formsangular
25
Glenn Utter

これは動作するはずです

toggleName() : void { 
  let ctrl = this.form.get('name')
  ctrl.enabled ? ctrl.disable() : ctrl.enable()
}
19
Günter Zöchbauer

これと同じ問題で、髪を引っ張っていました。私の解決策は、一方向バインディングではなく補間を使用してプロパティを更新することでした。あなたの場合、使用する代わりに：

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

あなたができる：

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

それを行うとすぐに、フォーム内の要素を動的に無効化/有効化することができました。

これがお役に立てば幸いです！

29
Vidal Quevedo

入力で読み取り専用属性を使用してみてください。

無効>>>読み取り専用

<input type="text" formControlName="name" [readonly]="!showName">
20
barış çıracı

RC6の時点では、disable（）関数を呼び出す必要があります RC6 Forms：disabled属性は動的に設定できなくなりました 。

7
JayChase

誰かがこれをスクロールして、受け入れられた答え（Günters）が機能しない場合は、最初は私にとっては機能しませんでした。カスタムコンポーネントで使用しようとしており、ControlValueAccessorインターフェイスからsetDisabledState(isDisabled: boolean)オプションメソッドを実装していない可能性があります。

4
Hampus

以下を使用する必要があります。

[attr.disabled]

の代わりに：

[disabled]

うまくいくことを願っています。

1
dodinh anh