angular - Angular2 - Reactive Form Properties -

i have reactive form generating component. there 5 optional select inputs user choose use , pick criteria from.

i trying implement error messages in can't quite figure out.

<span *ngif="importform.invalid && importform.touched" class="help-block text-danger">please select 1 piece of data filter by.</span>

since of fields options, @ least 1 required, how go checking 1 of fields has been touched prior showing invalid message?

component:

/**  * render form in ui allow  *  * @memberof filtersearchcomponent  */ renderform() {     this.importform = this.fb.group({         costcenter: [[]],         area: [[]],         silo: [[]],         department: [[]],         location: [[]],         segment: [[]],         role: [[]]     },         {             validator: (formgroup: formgroup) => {                 return this.validatefilter(formgroup);             }         }); }  /**  * checks see @ least 1 of filter  * options have been filled out prior searching  * 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 };     } } 

i don't want have || statement each of controls in html if can it.

are there other ways can see if input in form has been touched instead of specifying 1 want @ on individual basis ?

here want remove custom validator sits now. fired whenever happens form, assume has more values selects. fire unnecessary often.

instead listen click event, or similar of choosing. following example refined more (?), @ least have work if you'd choose following way.

here assume instead of using array select in form, you'd want capture 1 value, single formcontrol do:

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

after build of form, store different controls variables, avoid lengthy code property paths. iterate object properties in formgroup optionals, store in array, can check @ least 1 value set:

this.optionalctrl = this.importform.controls.optionals 

in template, well, here need set click event selects separately...

<select formcontrolname="costcenter" (click)="checkoptionals()"> 

in checkoptionals iterate object properties in formgroup optionals , check @ least 1 property has value other empty string. based on set custom error formgroup, or alternatively clear it.

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

} }

you might need call updatevalueandvalidity after setting error. in template show error when it's truthy:

<div *ngif="optionalctrl.haserror('nofilteroptions')">   choose @ least 1 filter </div> 

demo: http://plnkr.co/edit/vbtsyst0kauqe8brqlmt?p=preview