Search code examples
angulartypescriptangular2-formsangular2-formbuilder

Angular 2 or 4 Reactive form set validation depend on another field value


I'm trying to build out a form in Angular 2 using the Reactive Forms Module, and I'm trying to set validation of some field in a form that's required if another field is select.
Have I done something wrong?

ngOnInit() {
    this.martialForm = this.fb.group({
        'maritalStatus': [this.model.maritalStatus, [Validators.required]],
        'spouseTitle': [this.spouseModel.title, null]
    },{
         validator: this.validateIsSpouse
    })
}

validateIsSpouse(group: FormGroup) {
    if(this.model.maritalStatus == "01"){
        group.controls['spouseTitle'].setErrors({ isRequired: true });
    }

    return null;
}

Solution

  • Custom validation functions are written immediately after import statement and code and validator should be in following way :

    // import statement
    
    function validateIsSpouse(group: FormGroup) {
      let maritalStatus = group.get('maritalStatus').value;
      if(maritalStatus == "01"){
        return { isRequired: true };
      }
      return null;
    }
    
    // @Component
    
    export class MyClass implements OnInit {
    
      constructor(private fb: FormBuilder) {}
    
      ngOnInit() {
        this.martialForm = this.fb.group({
          'maritalStatus': [this.model.maritalStatus, [Validators.required]],
          'spouseTitle': [this.spouseModel.title, null]
        },{ validator: validateIsSpouse });
      }
    
    }