Angular custom Validator checkbox

Question

i am making a custom validator in Angular. the purpose of the validator is that it makes certain fields required when a checkbox is checked. At the moment the input that it validates is always required and not just when the checkbox is checked. here is my validator code:

import { FormControl, AbstractControl } from "../../../node_modules/@angular/forms";

   export function validateCheckbox(control:AbstractControl){
    const val = control.value;
    const check = control.root.get('checkbox'); //i think the problem is here: if i do .value i get an error

    if (check) {
        if (val === null || val === undefined || val === '') {
            return {
                validate: {
                  valid: false
                }
              };
        }else{
            return null;
        }
    }else{
        return null;
    }
}

My component using the validator:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { Customer } from '../account/models/customer.model';
import { validateCheckbox } from './customValidators';


@Component({
  selector: 'caredeal-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class RegistrationComponent implements OnInit {
  registerForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
      name:['',[Validators.required,Validators.minLength(2)]],
      firstName:['',[Validators.required,Validators.minLength(2)]],
      email:['', [Validators.required,Validators.minLength(2)]],
      telephone:['',[Validators.required,Validators.minLength(9)]],
      mobilePhone:['',Validators.minLength(10)],
      type:[''],
      checkbox:[false],
      companyName:['',Validators.minLength(2)],
      rizivNumber:[''],
      taxNumber:['',Validators.minLength(2)],
      streetName:['', Validators.required],
      houseNumber:['',validateCheckbox],
      bus:[''],
      zipCode:['',[Validators.required,Validators.minLength(4)]],
      place:['',[Validators.required,Validators.minLength(2)]]
    })
   }

  ngOnInit() {
  }

}

My html code, the checkbox is at the end of the code, validator is used on housenumber input.


        
            Account informatie
            
                
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                
                
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        Type klant:
                        
                    
                
            
        
        
            Bedrijfsgegevens
            
                
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                
            
        
        
            Afleveradres
            
                
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        
                        
                    
                    
                        Facturatie adres is verschillend van afleveradres

My Solution

Looks like you don't need a custom validator. it is eassier to subscribe to the checkbox and then update the form according to the value of the checkbox. This is my component code now:

export class RegistrationComponent implements OnInit {
  registerForm: FormGroup;
  bool:boolean = false;
  constructor(private formBuilder: FormBuilder) {
    this.registerForm = this.formBuilder.group({
      name:['',[Validators.required,Validators.minLength(2)]],
      firstName:['',[Validators.required,Validators.minLength(2)]],
      email:['', [Validators.required,Validators.minLength(2)]],
      telephone:['',[Validators.required,Validators.minLength(9)]],
      mobilePhone:['',Validators.minLength(10)],
      type:[''],
      checkbox:[false],
      companyName:['',Validators.minLength(2)],
      rizivNumber:[''],
      taxNumber:['',Validators.minLength(2)],
      streetName:['', Validators.required],
      houseNumber:[''],
      bus:[''],
      zipCode:['',[Validators.required,Validators.minLength(4)]],
      place:['',[Validators.required,Validators.minLength(2)]]
    })
    this.formControlValueChanged();
   }

   setNotification(): void {
    this.bool = !this.bool;
    if(this.bool){
      this.registerForm.root.get('houseNumber').setValidators(Validators.required);
    }else{
      this.registerForm.root.get('houseNumber').clearValidators();
    }
    this.registerForm.get('houseNumber').updateValueAndValidity();
  }

  ngOnInit() {
  }

  formControlValueChanged() {
    this.registerForm.get('checkbox').valueChanges.subscribe(
        (mode: string) => {
            this.setNotification();
        });
}
}

DeborahK · Accepted Answer

I did something similar below:

Above I make the phone required only if the Send Notifications radio button is set to text.

I do this using the following code:

  setNotification(notifyVia: string): void {
    const phoneControl = this.customerForm.get('phone');
    if (notifyVia === 'text') {
      phoneControl.setValidators(Validators.required);
    } else {
      phoneControl.clearValidators();
    }
    phoneControl.updateValueAndValidity();
  }

So instead of building a validator, this simply adds or clears the required validator on the field. In my example, I only set the validators for one control (phoneControl), but you could easily set the validators for any number of controls.

This code is called every time the radio button changes using code as shown below. You'd instead need to call the setNotification each time the checkbox is checked:

this.customerForm.get('notification').valueChanges
  .subscribe(value => this.setNotification(value));

Angular custom Validator checkbox

My Solution

Answers (2)

Related Questions