Angular 2 form validation on hidden fields

Question

I have a bank loan application which consists of alot of input fields, some of which are hidden (the hidden fields are shown dynamically based on a set of contidions). E.g if you choose option 1, a hidden field gets shown, and some other fields are hidden. If you choose option 2, some fields gets show, other fields get hidden. In the end of the form i have a which means the button will be disabled until the whole form is valid, but my problem now is that the hidden fields also get validated so the form will never be valid. Is there a way to tell angular to not validate fields if they are hidden?

The way i hide my fields is like the example below:

<form [formGroup]="form">

<select formControlName="loanType"> 
 <option value="0">Car loan</option>
 <option value="1">Student loan</option>
</select>

<div *ngIf="loanType === 0"> 
 <input type="text" required>
</div>

<div *ngIf="loanType === 1">
 <input type="text" required>
</div>

<button type="submit" [disabled]="!form.isValid">

</form>

Solution 1

UPDATE:

After doing some research, i found that i need to dynamically update the formGroup by using FormGroup.addControl() and FormGroup.removeControl().

The articles i read to come to my conclusion was: https://github.com/angular/angular/issues/7970 (check Karas answer)

https://scotch.io/tutorials/how-to-implement-conditional-validation-in-angular-2-model-driven-forms

just to give an example of what my code looks like for the next man with the same problem:

if (this.loanTypeId === 1) {
   this.form.addControl('name', new FormControl("", Validators.required));
} else {
   this.form.removeControl('name')
}

Solution 2

You are using reactive form. Even the fields are hidden from user the fields are active in the from. So simply you need to disable the field from the reactive from by using following code

form.get("fieldName").disable();

In reactive form you don't require the "required" in input tag. Also add the formControlName as below.

<input formControlName="inputFieldName" type="text">

So the html file will be like

<form [formGroup]="form" novalidate>

<select formControlName="loanType"> 
 <option value="0">Car loan</option>
 <option value="1">Student loan</option>
</select>

<div *ngIf="loanType === 0"> 
 <input formControlName="inputField1" type="text">
</div>

<div *ngIf="loanType === 1">
 <input formControlName="inputField2" type="text">
</div>

<button type="submit" [disabled]="!form.isValid">

</form>

We add formControlName to 2 input fields and it is declared in ts file.

this.form = this.formBuilder.group({
    loanType: ["", [Validators.required]],
    inputField1: ["", [Validators.required]],
    inputField2: ["", [Validators.required]],
});

We can create value change listener for loanType field

this.form.get("loanType").valueChanges.subscribe((loanType) => {
    this.form.get("inputField1").disable();
    this.form.get("inputField2").disable();
    if(loanType === 1) {
         this.form.get("inputField1").enable();
    } else if (loanType === 2) {
         this.form.get("inputField2").disable();
    }
});

So when the loan type is 1 inputField1 will be enabled and when loan type is 2 inputField2 is enabled.

By this form will be valid when the fields are hidden since it is disabled.

Comments

[John]

I think it is a better user experience if the asterix (*) is displayed on required fields, thus I would not omit the required attribute for those fields.

[John]

I haven't tried this, but if you remove the controller, and add the controller later, will the value previously written still be available? E.g. If I write 'John' in the name-field. Will the name, 'John', still be visible when you remove and add the controller later?

[John]

This answer should be the accepted one, because removing and adding controllers does not make sense when you can disable them instead. You don't have to think about adding the controllers again later if you need to, you can just enable them.

[JGFMK]

I would have possibly gone down the route of writing a custom validator, that emulates required, but takes an extra property you bind to it for hidden. When the hidden is true always return valid. Be wary of double negatives in heroes example of custom validators!

[JGFMK]

Here's an example I gave of custom validator without the confusion. stackoverflow.com/a/54756903/495157

[Standaa - Remember Monica]

N.B : valueChanges gets called every time you call disable or enable.