Menu
I am having the form group like
this.PatientInfo = this.fb.group({
PatientID: [0],
Gender: '',
Name:'',
Employer: this.fb.group({
EmployerID: 0,
Name: [''],
EmployerAddresses: this.fb.group({
Address1: [''],
Address2: [''],
CityName: [''],
District: [''],
StateName: [''],
PostalCode: [''],
Country: ['']
})
})
});
And i am binding the data like
<div class="col-md-3" formGroupName="EmployerAddresses">
<div class="form-group form-group-default">
<label class="control-label">State</label>
<div class="input-group">
<input type="text" class="form-control" formControlName="StateCode">
</div>
</div>
</div>
On top i kept the formgroup as PatientInfo.
Here i am getting the error "cannot find the control with name EmployerAddresses".
Can you please anyone help on this. Thanks in advance.
440
Nested Forms will allow us to create the array of objects for a single field and this hierarchy goes on. (i.e) A single object can have a number of objects inside of it, and we can achieve it in Reactive forms through the concept of “Form Array”.
A FormGroup aggregates the values of each child FormControl into one object, with each control name as the key. It calculates its status by reducing the status values of its children. For example, if one of the controls in a group is invalid, the entire group becomes invalid.
FormGroupDirective is a directive that binds a FormGroup to a DOM element. FormGroupName is a directive that links a nested FormGroup to a DOM element.
Defines an interface that acts as a bridge between the Angular forms API and a native element in the DOM.
This code solved my issue.
this.PatientInfo = this.fb.group({
PatientID: [0],
Gender: '',
Name:'',
Employer: this.fb.group({
EmployerID: 0,
Name: [''],
EmployerAddresses: this.fb.group({
Address1: [''],
Address2: [''],
CityName: [''],
District: [''],
StateName: [''],
StateCode: [''],
PostalCode: [''],
Country: ['']
})
})
});
<div class="col-md-3" formGroupName="Employer">
<div class="form-group form-group-default" formGroupName="EmployerAddresses">
<label class="control-label">State</label>
<div class="input-group">
<input type="text" class="form-control" formControlName="StateCode">
</div>
</div>
</div>
Thank you...
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With