ionChange works just once on the page and reactive form validators don't take effect every time a select it's changed

问题

What I wanted to achieve is to make different formControls mandatory or to clear them depending on a select option and it works, but the validators work just once on the page and not every time I change the select option. If I select "cm" and clear the input and go and select "ft" it works, but if I clear the "ft" input and go and select "cm" it doesn't work and the "ft" is now mandatory even though I wrote to clear the validator on "ft" if "cm" is selected. If you guys have any idea why I would really appreciate it.

HTML

<ion-content class="ion-padding">
  <form [formGroup]="measurementsForm">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-row class="quiz-choices">
            <ion-col>
              <ion-select
                [interfaceOptions]="customInterfaceOptions"
                formControlName="weightMeasurement"
                interface="action-sheet"
                placeholder="weight">
                <ion-select-option value="kg">kg</ion-select-option>
                <ion-select-option value="lbs">lbs</ion-select-option>
              </ion-select>
            </ion-col>

            <ion-col>
              <ion-input
                inputmode="numeric"
                formControlName="weightAmount"
                placeholder="Weight"
                value="amount">
              </ion-input>
            </ion-col>
          </ion-row>

          <ion-row>
            <ion-col>
              <ion-select
                [interfaceOptions]="customInterfaceOptions"
                formControlName="heightMeasurement"
                interface="action-sheet"
                placeholder="height"
                (ionChange)="onSelectFootMeasurement($event)">
                <ion-select-option value="cm">cm</ion-select-option>
                <ion-select-option value="ft">ft</ion-select-option>
              </ion-select>
            </ion-col>

            <ion-col *ngIf="!showFtInput">
              <ion-input
                type="number"
                inputmode="numeric"
                formControlName="heightAmountCm"
                placeholder="amount">
              </ion-input>
            </ion-col>
            <ion-col *ngIf="showFtInput">
              <ion-input
                type="number"
                formControlName="heightAmountFoot"
                placeholder="foot"
                inputmode="numeric">
              </ion-input>
            </ion-col>
            <ion-col *ngIf="showFtInput">
              <ion-input
                type="number"
                formControlName="heightAmountInch"
                placeholder="inch"
                inputmode="numeric">
              </ion-input>
            </ion-col>
          </ion-row>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>

TS

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";
import { NavController } from "@ionic/angular";

@Component({
  selector: "app-step-two",
  templateUrl: "./step-two.page.html",
  styleUrls: ["./step-two.page.scss"],
})
export class StepTwoPage implements OnInit {
  customInterfaceOptions: any = {
    cssClass: "alertCustomCss",
  };
  measurementsForm: FormGroup;

  selectedHeightMeasurement = "";
  showFtInput = false;

  constructor(private navCtrl: NavController) {}

  ngOnInit() {
    this.measurementsForm = new FormGroup({
      weightMeasurement: new FormControl(null, {
        validators: [Validators.required],
      }),
      weightAmount: new FormControl(null, {
        validators: [Validators.required],
      }),
      heightMeasurement: new FormControl(null, {
        validators: [Validators.required],
      }),
      heightAmountCm: new FormControl(null, {
        validators: [Validators.required],
      }),
      heightAmountFoot: new FormControl(),
      heightAmountInch: new FormControl(),
    });
  }

  onSelectFootMeasurement(event) {
    this.selectedHeightMeasurement = event.detail.value;
    let control1 = null;
    control1 = this.measurementsForm.get("heightAmountFoot");
    let control2 = null;
    control2 = this.measurementsForm.get("heightAmountInch");
    let control3 = null;
    control3 = this.measurementsForm.get("heightAmountCm");
    if (this.selectedHeightMeasurement === "ft") {
      this.showFtInput = true;
      control1.setValidators([Validators.required]);
      control1.updateValueAndValidity();
      control2.setValidators([Validators.required]);
      control2.updateValueAndValidity();
      control3.clearValidators();
      control3.updateValueAndValidity();
    } else if (this.selectedHeightMeasurement === "cm") {
      this.showFtInput = false;
      control3.setValidators([Validators.required]);
      control3.updateValueAndValidity();
      control1.clearValidators();
      control1.updateValueAndValidity();
      control2.updateValueAndValidity();
      control2.updateValueAndValidity();
    }
  }
}

来源：https://stackoverflow.com/questions/62968525/ionchange-works-just-once-on-the-page-and-reactive-form-validators-dont-take-ef