Angular2 - 反応性のあるフォームのプロパティ

Question

私は自分のコンポーネントに対して生成している反応的なフォームを持っています。ユーザーが使用して基準を選択することができる約5つのオプションの選択入力があります。

私はこれにいくつかのエラーメッセージを実装しようとしていますが、何かを明らかにすることはできません。私は、フィールドのいずれかがtouched前に無効なメッセージを示すになっていることを確認するに取り掛かることができるか

<span *ngIf="importForm.invalid && importForm.touched" class="help-block text-danger">Please select one piece of data to filter by.</span>

すべてのフィールドはオプションであるため、が、少なくとも1つの要求され、？

コンポーネント：

/** 
* Render the form in the UI to allow 
* 
* @memberof FilterSearchComponent 
*/ 
renderForm() { 
    this.importForm = this.fb.group({ 
     costCenter: [[]], 
     area: [[]], 
     silo: [[]], 
     department: [[]], 
     location: [[]], 
     segment: [[]], 
     role: [[]] 
    }, 
     { 
      validator: (formGroup: FormGroup) => { 
       return this.validateFilter(formGroup); 
      } 
     }); 
} 

/** 
* Checks to see that at least one of the filter 
* options have been filled out prior to searching 
* for employees. 
* 
* @param formGroup 
*/ 
validateFilter(formgroup: FormGroup) { 
    if (formgroup.controls["costCenter"].value.length || 
     formgroup.controls["area"].value.length || 
     formgroup.controls["silo"].value.length || 
     formgroup.controls["department"].value.length || 
     formgroup.controls["location"].value.length || 
     formgroup.controls["segment"].value.length || 
     formgroup.controls["role"].value.length 
    ) { 
     return null; 
    } else { 
     return { noFilterOptions: true }; 
    } 
} 

私は本当に私はそれを助けることができれば、私のHTML内の各コントロールのための||声明を行うにはしたくありません。

私のフォームに入力したものが、個別に見たいものを指定するのではなく、他の方法で触れているのを見ることができますか？

Answer 1

それが今座っているように私は、カスタムバリデータを削除したいと思います。あなたのフォームに何かが発生したときはいつでも解雇されます。私は選択したものよりも多くの価値があると想定しています。これは頻繁に不要になります。

代わりに、私はclickイベント、またはあなたの選択に似た何かを聞いています。次の例は、おそらくもう少し洗練されているかもしれませんが（少なくとも）、次のようにしたい場合は、少なくとも作業するものがあります。

ここで私が代わりに、フォーム内のすべてのselectのための配列を使用しての、あなただけの単一FormControlが行うことになるために一つの値を、キャプチャしたいと思うことを前提としていますのビルド後

this.importForm = this.fb.group({ 
    optionals: this.fb.group({ 
    costCenter: [''], 
    area: ['']   
    }) 
}); 

フォームには、変数に異なるコントロールを格納し、プロパティパスで長いコードを避けることができます。私は、formgroup optionals内のオブジェクトのプロパティを反復配列に格納し、我々はその後、少なくとも1つの値が設定されていることを確認することができます：

this.optionalCtrl = this.importForm.controls.optionals 

テンプレートでは、よく、ここでは、クリックイベントを設定する必要がありますすべての選択肢を個別に...checkOptionalsで

<select formControlName="costCenter" (click)="checkOptionals()"> 

次いでformgroup optionalsでオブジェクトのプロパティを反復し、少なくとも1つの特性は、空の文字列以外の値を持っていることをチェックします。これに基づいて、フォームグループにカスタムエラーを設定するか、あるいはそれをクリアします。

checkOptionals() { 
    for(let key in this.optionalCtrl.controls) { 
    if(this.optionalCtrl.controls[key].value != '') { 
     this.optionalCtrl.clearValidators() 
     // this.optionalCtrl.updateValueAndValidity() 
     break; 
    } else { 
     this.optionalCtrl.setErrors({"noFilterOptions": true}) 
    } 
    } 

}}

あなたはエラーを設定した後updateValueAndValidityを呼び出す必要があります。次に、テンプレートで、あなたはちょうどそれがtruthyだ時にこのエラーが表示さ：

<div *ngIf="optionalCtrl.hasError('noFilterOptions')"> 
    choose at least one to filter by 
</div> 

DEMO：http://plnkr.co/edit/VbtsYST0KAUqe8BRQlmt?p=preview

Answer 2

あなたがここに持っていることは動作するはずです：

<span *ngIf="importForm.invalid && importForm.touched" class="help-block text-danger">Please select one piece of data to filter by.</span> 

フォーム上のコントロールのいずれかがタッチされている場合は、フォームの触れたプロパティが設定されるべきです。私はそれが動作していないと仮定？どのように動作していないのですか？

Touched - >ユーザーが入力して入力要素を離しました。ユーザーが入力要素に何かを入力したかどうかについては何も言いません。

あなたは、ユーザーが入力要素の1つの値を更新しているかどうかを知りたいの代わりに汚れを使用する場合：ここで

<span *ngIf="importForm.invalid && importForm.dirty" 
     class="help-block text-danger"> 
    Please select one piece of data to filter by. 
</span>