CODEWITHSUNDEEP
angulartypescriptangular2-formsangular2-formbuilder
Witchayanin
Witchayanin

Reputation: 67

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

Upvotes: 4

Views: 8048

Answers (1)

Tejal
Tejal

Reputation: 471

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

}

Upvotes: 9

Related Questions