javascript - 在函数内部动态设置时，setValidators 根本不起作用

Question

我不确定为什么 setValidators 在我的以下代码中不起作用。我不确定问题是什么，因为当我根据需要设置 formControl 时它没有任何效果。我想要实现的是在选择特定选项时动态设置一些所需的 FormControls。如果你有任何想法那将是惊人的。谢谢!

这是我的HTML

 <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
                inputmode="numeric"
                formControlName="heightAmountCm"
                placeholder="amount">
              </ion-input>
            </ion-col>
            <ion-col *ngIf="showFtInput">
              <ion-input
                formControlName="heightAmountFoot"
                placeholder="foot"
                inputmode="numeric">
              </ion-input>
            </ion-col>
            <ion-col *ngIf="showFtInput">
              <ion-input
                formControlName="heightAmountInch"
                placeholder="inch"
                inputmode="numeric">
              </ion-input>
            </ion-col>
          </ion-row>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>

这是我的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(),
      heightAmountFoot: new FormControl(),
      heightAmountInch: new FormControl(),
    });
  }

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

}

Answer 1

您需要updateValueAndValidity

dynamicValidation(): void {
    let control1 = null;
    control1 = this.measurementsForm.get('controlName');
      control1.setValidators([Validators.pattern(this.nameREGEX), Validators.minLength(this.minLength)]);
  control1.updateValueAndValidity();

  }