在函数内部动态设置时,setValidators 根本不起作用
setValidators doesn't work at all when set dynamically inside of a function
我不确定为什么 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;
}
}
}
您需要updateValueAndValidity
dynamicValidation(): void {
let control1 = null;
control1 = this.measurementsForm.get('controlName');
control1.setValidators([Validators.pattern(this.nameREGEX), Validators.minLength(this.minLength)]);
control1.updateValueAndValidity();
}
我不确定为什么 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;
}
}
}
您需要updateValueAndValidity
dynamicValidation(): void {
let control1 = null;
control1 = this.measurementsForm.get('controlName');
control1.setValidators([Validators.pattern(this.nameREGEX), Validators.minLength(this.minLength)]);
control1.updateValueAndValidity();
}