2017-08-09 4 views
0

私は2つの選択ドロップダウンで、より反応性を持っています。最初の値で選択した値によっては、2番目の値が必要な場合とない場合があります。Angular2/4 - 動的に設定する方法反応性フォーム、および明確な必要なバリデータ

これは最初のものにするときの値の変化を発生させたコードです。基本的に配列を検索して配列が一致するかどうかを調べ、2番目のドロップダウンに割り当てられている場合は必要なバリデータを追加します。そうでない場合、コントロールは無効になり、バリデータは削除されます。

しかし、フィールドは、他の部分で必要とフォーム全体が無効とマークされたまま。だから何が欠けている?

getCategoryTypes(value: string) { 
    let types = this.categories.find(v => v.name === value); 
    if (types) { 
     this.categoryTypes = types.category_types; 
     this.category_type.setValue(""); 
     this.category_type.setValidators([Validators.required]); 
     this.category_type.updateValueAndValidity(); 
    } 
    else { 
     this.categoryTypes = []; 
     this.category_type.setValidators(null); 
     this.category_type.updateValueAndValidity(); 
    }; 
    } 

FYI:ドキュメントで

category_type: FormControl; 

UPDATE

私はthisを発見:

「これらのステータスは、相互に排他的であるので、制御が両方とも有効にすることはできません。無効または無効であり、無効になっています。

「無効コントロールは、検証チェックを免除され、それらの祖先コントロールの集計値に含まれていません。」

だからコントロールを無効にすると、自動的に検証を削除するため、有効なものとしてコントロールをマークする必要があります。

+0

問題を再現するのに十分な情報ではありません。ここのコードは私にとってはうまく見えます。おそらく問題を紹介するプランナーを作成するでしょうか? – Alex

+0

このロジックの適切な分岐を確実に実行していますか? – DeborahK

+0

これを試してみましたか: 'this.category_type.clearValidators();' – DeborahK

答えて

1

ザ・(タイプ)チェックが働いていなかったが、私はまた、削除して、検証を再度追加する必要はありません発見した場合、私は無効にすることができ、コントロールを再度有効にします。したがって、解決策は次のとおりです。

getCategoryTypes(value: string) { 
    let types = this.categories.find(v => v.name === value).category_types; 
    if (types.length > 0) { 
     this.categoryTypes = types; 
     this.category_type.setValue(""); 
     this.category_type.enable(); 
     this.category_type.updateValueAndValidity(); 
    } 
    else { 
     this.categoryTypes = []; 
     this.category_type.disable(); 
     this.category_type.updateValueAndValidity(); 
    }; 
    } 
関連する問題