2017-06-10 16 views
1

私はモデル駆動テンプレートを使用しています。チェックボックスをチェックしないと入力を無効にしたいのですが、formControlNameで動作しません。 私は3つの方法で試しました。 は、角度2のモデル駆動型にformControlNameを使用できません。

<md-checkbox [checked]="filterForm.value.customer_limit" formControlName="customer_limit"> 
         <md-input-container class="full-width"> 
          <input mdInput 
            formControlName="customer_limit_input" 
            [disabled]="!filterForm.value.customer_limit" 
            placeholder="Limit to customers"> 
    </md-input-container> 
    </md-checkbox> 

が任意のアイデアを持っている私を助けてください:これは私のHTMLコードです

1.disabled="!filterForm.value.customer_limit" 
2.[disabled]="!filterForm.value.customer_limit" 
3.[readonly]="!filterForm.value.customer_limit" 

ここ与えます。おかげ

+0

あなた 'formControlName = "customer_limit"'だとあなたは '[無効] = "!filterForm.value.customer_limit"'としてアクセスしています。定義されていない追加の '.value'を使用しています – Aravind

+0

@ Aravindは未定義です。私はそれをチェックする。 –

+0

それから何が起こったのですか?問題を再現するためのプランナーを作成します。 – Aravind

答えて

1

[disabled]またはdisabledは動作しません。使用できるのは、チェックボックスがオンになっているかどうかをチェックし、入力フィールドを無効または有効にすることです。

まず、チェックボックスの内側から入力フィールドを削除しましたが、なぜそこに配置されたのかわかりませんでした。

if this.myForm.get('customer_limit').value === true 
    this.myForm.get('customer_limit_input').enable() 

あなたががブール値を知って場合:フォームを構築するときに

はその後、私はcustomer_inputの値をチェックし、それが偽だ場合は、入力フィールドを無効にするには、if文を作りましたShaileshによって提案されたように、最初はcustomer_limitの、あなたは上記をスキップすることができ、そしてちょうど(その場合は)最初にフィールドを無効にします。

customer_limit_input: [{value: 'something', disabled: true}] 

私は、チェックボックスの状態を監視し、変更が発生したときの関数を呼び出すように変更イベントを置く:

<md-checkbox (change)="disableEnableInput(myForm.get('customer_limit').value)" 
    formControlName="customer_limit"> 
</md-checkbox> 
<md-input-container class="full-width"> 
    <input mdInput formControlName="customer_limit_input"> 
</md-input-container> 

disableEnableInput()機能:

disableEnableInput(bool: boolean) { 
    if bool === true 
    this.myForm.get('customer_limit_input').enable() 
    else 
    this.myForm.get('customer_limit_input').disable() 
} 

を私があればそこに知りませんこれのためのよりエレガントなソリューションです(?)しかし、これまで私が使用しているものです。

はここDEMO

+1

あなたは大歓迎です!私は手動で無効にして有効にするよりも、この「無効」問題の方がまだ優れていないと考えています。しかし、さらに、 'change'以外の変更を監視する他のオプションがあります。あなたは別の答えで提供されるような' valueChanges'を使うことができます。私は 'change'を使うのが好きですが、それは好みの問題です! :)素敵な一日を過ごしてコーディングをしてください! :) – Alex

+1

実際に私のフォームに多くのチェックボックスがありますので、すべてのチェックボックスをオンにして入力を有効にする必要があるので、valueChangesメソッドは完全なフォームデータを与えられます。 1つの特定のチェックボックスチェンジイベントを与えて、直接セットイネーブルディセーブルに設定します。なぜ私の場合はあなたの答えが良いthatsです。どうもありがとう。 –

0

Assalamualaikum、あなたのコンポーネントで

はあなたの入力状態を保持するboolean変数を定義していることを確認します

disabled: boolean = true; 

とテンプレートで、あなたはそれトグル以下の通り:

<md-checkbox [(ngModel)]="disabled">Toggle Input</md-checkbox> 
<input mdInput [disabled]="disabled"> 

モデル駆動型の場合は、テンプレートは次のようにフォーマットします。

<md-checkbox [formControl]="checkbox">Toggle Input</md-checkbox> 
<input mdInput [disabled]="disabled"> 

とあなたのコンポーネントで、あなただけのこのような変化のために聞く:

disabled: boolean; 
ngOnInit(){ 
    this.checkbox.valueChanges.subscribe(val => this.disabled = val); 
} 
+0

私はモデル駆動型メソッドを使用しています。問題が無効になっていますformControlName –

+0

で動作していません。 –

+0

@ShaileshLadumor何がエラーですか?あなたのチェックボックスはフォームの中にありますか、それともテンプレートのように分かれていますか? –

0

私はformControlNameで無効hereセットから解決策を得ました。反応性フォームで

form = new FormGroup({ 
    'first': new FormControl({value: 'hello', disabled: false}) 
    }) 

ngOnInit(): void { 
     this.filterForm.valueChanges.subscribe(
      (formValue) => { 
       console.log(formValue) 
      } 
     ); 
    } 
関連する問題