Ion-valid, ion-pristine and ion-untouched not updating with angular written markAsTouched, markAsDirty and setErrors()

Ionic Framework
1

I have two form fields that are basically XNOR for validity, they can either both be empty or both be populated. It’s a formgroup of 4 overall, two of them are required and then these two as above.

I am using a formgroup level validator and I can see that when I manually set them as touched, invalid and dirty the relevant ng- classes change however the ionic ones stay and don’t change until I enter and then leave the text box. This means when I can one the status of the other doesn’t appear to change in the ui.

How can I make the ion classes follow suit with the ng- classes?

const formGroup: FormGroup = new FormGroup({}, this.scaleMatchValidator);
// make 4 weight boxes (m/f, rx/s1)
formGroup.addControl('rx_male', new FormControl('', Validators.required));
formGroup.addControl('rx_female', new FormControl('', Validators.required));
formGroup.addControl('s1_male', new FormControl(''));
formGroup.addControl('s1_female', new FormControl(''));

...

scaleMatchValidator(g: FormGroup) {
    const female = g.get('s1_female');
    const male = g.get('s1_male');
    let isValid = false;

    if (male && female) {
      male.setErrors(null);
      female.setErrors(null);
      if ((male.value && female.value) || (!male.value && !female.value)) {
        isValid = true;
      } else {
        male.setErrors({scalseNotValid: true});
        female.setErrors({scalseNotValid: true});
        male.markAsTouched();
        female.markAsTouched();
        male.markAsDirty();
        female.markAsDirty();
      }
      return isValid ? null : { scalseNotValid: true };
    }
  }