Angular FormGroup custom validator not triggered on button click

Question

I am using reactive forms Angular 4 and added a custom validator addressValidation to the form group - addressGroup. I am updating all fields to mark as touched on submit click. Looks like the custom validator addressValidation doesn't trigger eventhough I marked all fields as touched. I tried marking the formgroup (addressGroup) as touched and dirty on submit but no help.

In general what I am trying to achieve is - By default I want to make street number and Street name required. If po box is entered then street number and Name is not required. Apt # is only required only if street number and name is entered. I am trying to achieve this on the custom validator in the formGroup.

Any idea on what I am doing wrong. Any other alternate way to achieve the above requirement. I am new to Angular and slowly learning the concepts. Any suggestion on How to trigger the custom validator on submit.

     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 };
            }
        }
    }

Template

 
            
                Mailing Address:
            
            
                
                    
                        
                            PO Box:
                            
                            
                                {{validationMessage.pOBox}}
                            
                        
                    
                    
                        
                            Street Number:
                            
                            
                                {{validationMessage.streetNumber}}
                            
                        
                    
                    
                        
                            Apt Number:
                            
                            
                                {{validationMessage.aptNumber}}
                            
                        
                                        
                
                
                    
                        
                            Street Name:
                            
                            
                                {{validationMessage.streetName}}
                            
                        
                    
                
                
                    
                        
                            City:
                            
                            
                                {{validationMessage.cityControl}}
                            
                        
                    
                    
                        
                            State/Province (Code):
                            
                            
                                {{validationMessage.stateControl}}
                            
                        
                    
                    
                        
                            Zip:
                            
                            
                                {{validationMessage.zipControl}}
                            
                        
                    
                
                
                    
                        
                            Country:
                            
                            
                                {{validationMessage.countryControl}}

Angular FormGroup custom validator not triggered on button click

Answers (1)

Related Questions