Folks, I’ve been trying to create a reactive validation for my register form in angular. Since I want either at least one or both fields filled for contact information(e-mail and cellphone number), I grouped those controls within my formbuilder, as follows below:
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
contact: this.fb.group({
email: ['', {
updateOn: 'blur',
validators: Validators.email
}],
celphoneNumber: ['']
}, { validators: this.atLeastOneValidator }),
name: ['', Validators.required],
password: ['', Validators.required],
cpassword: ['', Validators.required],
whatsapp: [false],
birthday: [''],
promo: [false],
terms: [false, Validators.requiredTrue],
});
}
My custom validation function also follows:
public atLeastOneValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
const controls = control.controls;
if (controls) {
const theOne = Object.keys(controls).findIndex(key => controls[key].value !== null && controls[key].value !== '');
if (theOne === -1) {
return {
atLeastOneRequired: {
text: 'At least one should be selected'
}
};
} else {
return null;
}
}
}
Unfortunatelly, although my validation works, Ionic can’t provide ion-item parent with class ion-invalid while children input remains invalid (ion-item has both classes ion-valid and ng-invalid, but ion-valid color-highlight seem to applies).
I’ve already tried to bind ion-invalid class to form errors but Ionic ignores it for this specific class (ion-invalid is overriden by ion-valid, other classes apply though).
Is it an error that should be fixed by Ionic team or am I missing anything?
Tks