Okai, i found out that calling the "markAsTouched()" method on the control actually does remove the ng-untouched and add the ng-touched class on the input, but not on the ion-item. is this a bug or a feature?
something like this will get it work...
next()
{
for (var controlName in this.personForm.controls) {
let ele = document.querySelector('[formControlName="' + controlName + '"]');
this.personForm.controls[controlName].markAsTouched();
if(ele) {
this.setControlCss(ele.parentElement.parentElement.parentElement, this.personForm.controls[controlName]);
}
}
}
setControlCss(element: any, control: AbstractControl)
{
this.renderer.setElementClass(element, 'ng-untouched', control.untouched);
this.renderer.setElementClass(element, 'ng-touched', control.touched);
this.renderer.setElementClass(element, 'ng-pristine', control.pristine);
this.renderer.setElementClass(element, 'ng-dirty', control.dirty);
this.renderer.setElementClass(element, 'ng-valid', control.valid);
this.renderer.setElementClass(element, 'ng-invalid', !control.valid);
}
note, for some reasons ionic is not highlighting select-input items which are invalid with a red border, only text-inputs. again, is this a bug or a feature?