Angular2: Conditional validation required

Question

I am trying to create a conditional required check in a specific field. I am trying to do this using return Validators.required in my function, but this does not seem to work. How can I do it? Here is my code:

private _ansat: AbstractControl = new FormControl('', Validators.required); private _helbred: AbstractControl = new FormControl('', Validators.compose([this.useValidateIfRadio(this._ansat, 0, Validators.required)]) ); constructor(private _fb: FormBuilder) { this.myForm = this._fb.group({ ansat: this._ansat, helbred: this._helbred }); } useValidateIfRadio (c: AbstractControl, n: number, v) { return function (control) { return new Promise(resolve => { // this.msg = ansatControl.value; console.log(v); if (c.value === n) { resolve(v); } else { resolve(null); } }); }; }; 

Any help is greatly appreciated.

Answer 1

I had a similar problem, but I could not find the answer. Since no one has answered this question yet, I will give an example of how I solved my problem and how you can solve your problem using the same solution.

Example: (a phone number is required only if an email address is not specified)

 export class UserComponent implements OnInit { userForm: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { //Create my userForm and and add initial validators this.userForm = this.fb.group({ username: [null, [Validators.required]], name: [null, [Validators.required]], email: [], phoneNumber: [null, [Validators.required, Validators.minLength(4)], }); //Listen to email value and update validators of phoneNumber accordingly this.userForm.get('email').valueChanges.subscribe(data => this.onEmailValueChanged(data)); } onEmailValueChanged(value: any){ let phoneNumberControl = this.userForm.get('phoneNumber'); // Using setValidators to add and remove validators. No better support for adding and removing validators to controller atm. // See issue: https://github.com/angular/angular/issues/10567 if(!value){ phoneNumberControl.setValidators([Validators.required, Validators.minLength(4)]); }else { phoneNumberControl.setValidators([Validators.minLength(4)]); } phoneNumberControl.updateValueAndValidity(); //Need to call this to trigger a update } } 

So in your case, you should add changeListener to "_ansat" equal to my email listener, and then add the required to "_helbred" accordingly.

Answer 2

Just add a validator for the field:

 if(some_logic) { this.your_form.get('field_name').setValidators([Validators.required]); } 

Answer 3

These answers helped me go most of the way, but I found a pretty big mistake ... in some cases, setValidators only adds to the existing array of validators and doesn't clean them very well. In some cases, for example, when ngOnInit is loaded twice in a row, conditions can be negative first and then positive for the passed value that you depend on. In this case, you set it as mandatory, and then try to clear it, but the user interface will still behave as it expects. To fix this, consider the following ...

 const myControl = this.your_form.get('field_name'); if(some_logic) { myControl.clearAsyncValidators(); myControl.clearValidators(); myControl.updateValueAndValidity({onlySelf:true}); } else { myControl.setValidators([Validators.required, Validators.other…]); }