單擊按鈕時不會觸發 Angular FormGroup 自定義驗證器
[英]Angular FormGroup custom validator not triggered on button click
問題描述
我正在使用反應式表單 Angular 4，並在表單組 - addressGroup 中添加了一個自定義驗證器 addressValidation。 我正在更新所有字段以在提交點擊時標記為已觸摸。 看起來自定義驗證器 addressValidation 不會觸發，即使我將所有字段都標記為已觸摸。 我嘗試在提交時將表單組（addressGroup）標記為觸摸和臟，但沒有幫助。
總的來說，我想要實現的是 - 默認情況下，我想讓街道號碼和街道名稱成為必需。 如果輸入郵政信箱，則不需要街道號碼和姓名。 僅當輸入了街道號碼和名稱時才需要 Apt #。 我試圖在 formGroup 中的自定義驗證器上實現這一點。
關於我做錯了什么的任何想法。 實現上述要求的任何其他替代方法。 我是 Angular 的新手，正在慢慢學習這些概念。 關於如何在提交時觸發自定義驗證器的任何建議。
buildForm(): void {
this.contactForm = this.fb.group({
emailAddressControl: ['', [Validators.required, Validators.email, Validators.maxLength(100)]],
phoneControl: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(10)]],
addressGroup: this.fb.group({
streetNumber: ['', [Validators.maxLength(10)]],
pOBox: ['', [Validators.maxLength(8)]],
aptNumber: ['', [Validators.maxLength(8)]],
streetName: ['', [Validators.maxLength(60)]],
cityControl: ['', [Validators.required, Validators.maxLength(50)]],
stateControl: ['', [Validators.required, Validators.maxLength(2)]],
zipControl: ['', [Validators.required, Validators.maxLength(14)]],
countryControl: ['UNITED STATES OF AMERICA', [Validators.required]],
}, { validator: addressValidation })
})
this.contactForm.valueChanges
.debounceTime(800)
.subscribe(data => this.onValueChanged(data));
this.onValueChanged();
}
onSubmit(): void {
this.markAllFormFieldsAsTouched(this.contactForm);
this.onValueChanged();
}
private markAllFormFieldsAsTouched(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(field => {
console.log(field);
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
}
else if (control instanceof FormGroup) {
this.markAllFormFieldsAsTouched(control);
control.markAsTouched({ onlySelf: true });
}
else if (control instanceof FormArray) {
for (let formgroupKey in control.controls) {
let formgroup = control.controls[formgroupKey];
if (formgroup instanceof FormGroup) {
this.markAllFormFieldsAsTouched(formgroup);
}
}
}
});
}
function addressValidation(c: AbstractControl): { [key: string]: boolean } | null {
if (c.pristine) {
return null;
}
const pOBoxControl = c.get('pOBox');
const streetNameControl = c.get('streetName');
const streetNumberControl = c.get('streetNumber');
const aptNumberControl = c.get('aptNumber');
if (pOBoxControl.value === null || pOBoxControl.value === "") {
if (streetNumberControl.value === null || streetNumberControl.value === "") {
return { ['streetNumberRequired']: true, ['streetNameRequired']: true };
}
if (streetNameControl.value === null || streetNameControl.value === "") {
return { 'streetNameRequired': true };
}
}
else {
if ((streetNameControl.value === null || streetNameControl.value === "")
&& (streetNameControl.value === null || streetNumberControl.value === "") && aptNumberControl.value !== "") {
return { 'apartmentNumberInvalid': true };
}
}
}
模板
<div class="card">
<div class="card-header bg-info text-white">
<h2>Mailing Address:</h2>
</div>
<div formGroupName="addressGroup" class="card-body">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">PO Box:</label>
<input class="form-control"
[ngClass]="displayFieldCss('pOBox')"
type="text"
formControlName="pOBox"
placeholder=""
maxlength="8" />
<span class="invalid-feedback" *ngIf="isValidToDisplayErrors('pOBox')">
{{validationMessage.pOBox}}
</span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">Street Number:</label>
<input class="form-control"
[ngClass]="displayFieldCss('streetNumber')"
type="text"
formControlName="streetNumber"
placeholder=""
maxlength="10" />
<span class="invalid-feedback" *ngIf="isValidToDisplayErrors('streetNumber')">
{{validationMessage.streetNumber}}
</span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">Apt Number:</label>
<input class="form-control"
[ngClass]="displayFieldCss('aptNumber')"
type="text"
formControlName="aptNumber"
placeholder=""
maxlength="8" />
<span class="invalid-feedback" *ngIf="isValidToDisplayErrors('aptNumber')">
{{validationMessage.aptNumber}}
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="form-control-label">Street Name:</label>
<input class="form-control"
[ngClass]="displayFieldCss('streetName')"
type="text"
formControlName="streetName"
placeholder=""
maxlength="60" />
<span class="invalid-feedback" *ngIf="isValidToDisplayErrors('streetName')">
{{validationMessage.streetName}}
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-5">
<div class="form-group">
<label class="form-control-label">City:</label>
<input class="form-control"
[ngClass]="displayFieldCss('cityControl')"
type="text"
formControlName="cityControl"
placeholder="(required)"
maxlength="50" />
<span class="invalid-feedback" *ngIf="isValidToDisplayErrors('cityControl')">
{{validationMessage.cityControl}}
</span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">State/Province (Code):</label>
<input class="form-control"
[ngClass]="displayFieldCss('stateControl')"
type="text"
formControlName="stateControl"
placeholder="(required)"
maxlength="3" />
<span class="invalid-feedback" *ngIf="isValidToDisplayErrors('stateControl')">
{{validationMessage.stateControl}}
</span>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label class="form-control-label">Zip:</label>
<input class="form-control"
[ngClass]="displayFieldCss('zipControl')"
type="text"
formControlName="zipControl"
placeholder="(required)"
maxlength="14" />
<span class="invalid-feedback" *ngIf="isValidToDisplayErrors('zipControl')">
{{validationMessage.zipControl}}
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="form-control-label">Country:</label>
<input class="form-control"
[ngClass]="displayFieldCss('countryControl')"
type="text"
formControlName="countryControl"
placeholder="(required)"
maxlength="50" />
<span class="invalid-feedback" *ngIf="isValidToDisplayErrors('countryControl')">
{{validationMessage.countryControl}}
</span>
</div>
</div>
</div>
</div>
</div>
1 個解決方案
解決方案1
1 2019-04-11 08:17:16
您必須像這樣使用 control.updateValueAndValidity()
onSubmit(): void {
if (this.form.valid) {
} else {
this.validateAllFormFields(this.committeForm);
this.logValidationErrors(this.committeForm);
this.scrollToError();
}
}
validateAllFormFields(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.updateValueAndValidity()
} else if (control instanceof FormGroup) {
this.validateAllFormFields(control);
}
});
}
自定義驗證器Angular 2
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.