Conditional Form Validations for Angular Reactive Form

Question

I'm trying to set conditional form validations on an angular reactive form and need some help.

I have a form control where the user sets their entity type to either Individual or Business

<select formControlName="entity">
  <option [value]="individual">Individual</option>
  <option [value]="business">Business</option>
</select>

I then have form inputs that display or hide based upon what entity is selected:

<div *ngIf="myForm.controls.entity.value == individual>
  <input formControlName="fullName" />
</div>

<div *ngIf="myForm.controls.entity.value == business>
  <input formControlName="businessName" />
</div>

How can I make both inputs required only if the corresponding entity is selected?

Possible duplicate of Angular 2: Apply Validator.required validation on some condition — JayChase
– JayChase, Commented Mar 2, 2018 at 10:44

Mehdi · Accepted Answer · 2017-10-09 19:53:54Z

14

You can use the attribute [formControl]="name_of_your_input_control" assuming this html is within a formGroup element

<div [hidden]="isBusiness">
  <input [formControl]="fullName" />
</div>

<div [hidden]="!isBusiness">
  <input [formControl]="businessName" />
</div>

in your ts class :

After you create your form add this :

isBusiness:boolean = false;
//...
this.nameOfYourForm.valueChanges.subscribe((newForm) => {
     this.isBusiness = (newForm.controls.entity.value == 'business');
     if(this.isbusiness){
        this.nameOfYourForm.controls.fullName.setValidators(/*your new validation here*/);
           //set the validations to null for the other input
     }else{       
           this.nameOfYourForm.controls.businessName.setValidators(/*your new validation here*/);
           //set the validations to null for the other input
     } 
});

Notice that I changed your *ngIf to [hidden] as *ngIf will completely remove the controle from your template where [hidden] will just apply a display none.

You can also add a change listener on a specific control instead of the whole form, but the idea is the same.

answered Oct 9, 2017 at 19:53

Mehdi

2,4081 gold badge19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eqbal Sajadi Over a year ago

Or you can define your control at runtime: <code> isBusiness:boolean = false; //... this.nameOfYourForm.valueChanges.subscribe((newForm) => { this.isBusiness = (newForm.controls.entity.value == 'business'); if(this.isbusiness){ this.nameOfYourForm.registerControl('yourControl', new FormControl('', [Validators])); }else{ this.nameOfYourForm.removeControl('yourControl'); })</code>

Vega · Accepted Answer · 2017-10-09 20:39:07Z

1

I have an other version:

HTML

<select #select formControlName="entity">
  <option  [ngValue]="Individual">Individual</option>
  <option  [ngValue]="Business">Business</option>
</select>
<br>
<div *ngIf="select.value[0]  === '0'">
  <input #input [required]="select.value[0] === '0'" formControlName="fullName" />
  <span *ngIf="!myForm.get('fullName').valid">Invalid</span>
</div>

DEMO

answered Oct 9, 2017 at 20:39

Vega

28.8k28 gold badges121 silver badges151 bronze badges

2 Comments

squirrelsareduck Over a year ago

the template should be used for validation logic only in Template-driven forms

Vega Over a year ago

@squirrelsareduck, the solution that I propose is for reactive forms, only the check is done in the template. There is nothing wrong with it, I would say there are some advantages. Otherwise, prove it

Ahmet Emrebas · Accepted Answer · 2022-11-07 00:59:52Z

1


const formGroup= new FormGroup({
    type: new FormControl(), 
    businessForm: new FormGroup({
      businessName: new Formcontrol('')
    }), 
    individualForm:new FormGroup({
      individualName: new Formcontrol('')
    })
}); 

formType$ = this.formGroup.controls['type'].valueChanges;

<form [formGroup]="formGroup">

   <div formGroupName="businessForm" *ngIf="(formType$ | async) =='business'">       
     <input formControlName="businessName"/>
   </div>

   <div formGroupName="individualForm" *ngIf="(formType$ | async) =='individual'">
     <input formControlName="individualName"/>
   </div>

</form>

edited Nov 7, 2022 at 0:59

answered Apr 12, 2021 at 18:45

Ahmet Emrebas

1,01211 silver badges18 bronze badges

Collectives™ on Stack Overflow

Conditional Form Validations for Angular Reactive Form

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related