angular 4 form validation with reactive form not working

Question

I am new on angular v4. I have to do a validation on form. The form structure is there are two checkboxes if i select a first checkbox then the multiple fields of that form makes editable with valdiations and on uncheck those fields make disabled and the second checkbox also works with the same behaviour. Here is the snapshot of the page

If general info checkbox is clicked then all the fields on left side should be in editable with validations and on uncheck makes all the field disabled and also same with the address checkbox if it checks all the fields should be editable with validations and on uncheck makes it disabled.

Thanks..

Answer 1

Create two forms for general info and address.

generalInfoForm = fb.group( (
   'name' : [null, Validators.required],
   'age'  : [null, Validators.required] .... )) ;

addressForm = fb.group( (
   'house_no' : [null, Validators.required],
   'LandMark'  : [null, Validators.required] )) ;

Then also make sure you have two boolean variables for the result of the above checkboxes.

Then you can use angular binding for the form to be disabled or not.

---

left div

Name : <input type="text" .... [disabled]="! general_Info_Selected" />

Age : <input type="text" .... [disabled]="! general_Info_Selected" />

right div

House No : <input type="number" .. [disabled]="! address_Selected" />

Landmark : <input type="text" .... [disabled]="! address_Selected" />