Angular model driven validator conditional to a control value

Question

I'm currently defining a model driven form with formBuilder. In this form there is a radio button. And if the value of this radio button is true then I want to display additional inputs which only then are required.

If the radio is false then the additional inputs can be empty and must not block form submit.

Here is the formbuilder part, how can I make my scenario work?

initDynamicForm() {
    let name = '';
    let moreData = false;
    let email = '';

    this.dynamicForm = this.formBuilder.group({
      name: [ name, Validators.required ],
      moreData: moreData,
      email: email // HERE: if moreData is true => must be required
    });
  }

Any idea on how to set this dynamically defined Validators.required on email input depending on moreData value?

Fact to mention: dynamicForm is called several times inside a *ngFor loop. Thus I can't defined component level attributes to be used because each form using dynamicForm "template" must work independently.

AT82 AT82 · Accepted Answer · 2017-04-19T16:07:29

If it's acceptable, perhaps the easiest way is to disable email field when the radio button is false, because this means the email-field will not be included in the form, thus it doesn't affect the validity of the form.

So I'd put a function, that checks the value of the radio button:

this.dynamicForm = this.formBuilder.group({
  name: ['', Validators.required ],
  moreData: [false, this.checkMoreData.bind(this)]
  email: ['', Validators.required] 
});

And then the function:

checkMoreData(control: FormControl) {
  if(control.value == true) {
    this.myForm.get('email').enable()
  }
  // we have to check if myForm is not undefined (since it will be upon initialization)
  // also check if the control is not undefined
  else if (this.myForm && control) {
    this.myForm.get('email').disable()
  }
}

In the end, if you do need to get all fields, disabled or not, you can use getRawValue, which also includes any disabled fields.

Angular model driven validator conditional to a control value

1 Answers

Demo