单击按钮时未触发Angular FormGroup自定义验证程序

时间:2017-11-10 15:31:27

标签: forms angular validation

我正在使用反应式表单Angular 4并将自定义验证程序addressValidation添加到表单组 - addressGroup。  我正在更新所有字段以标记为提交点击。看起来自定义验证器addressValidation不会触发,尽管我将所有字段标记为已触摸。我尝试将formgroup(addressGroup)标记为提交但脏的提交但没有帮助。

一般来说,我想要实现的目标是 - 默认情况下,我想要制作街道号码和街道名称。如果输入了po box,则不需要街道号码和名称。 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 个答案:

答案 0 :(得分:0)

您必须像这样使用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(contr`enter code here`ol);            
}
});