I'm working with a form that is split across components, so I need to utilize the .addControl
method to ensure the form functions cohesively.
This is how the form structure currently looks:
name: ['', [Validators.required, Validators.maxLength(255)]],
address: this.ofb.group({
addressLineOne: ['', Validators.required],
addressLineTwo: ['', Validators.required],
addressLineThree: [''],
addressPostcode: ['', [Validators.required, OrgValidators.postcodeValidator]]
})
I've made adjustments to convert the fields to the .addControl
syntax as follows:
this.createOrganisationForm.addControl('name', new FormControl(null, [Validators.required, Validators.maxLength(255)]));
this.createOrganisationForm.addControl('addressLineOne', new FormControl(null, [Validators.required]));
this.createOrganisationForm.addControl('addressLineTwo', new FormControl(null, [Validators.required]));
this.createOrganisationForm.addControl('addressLineThree', new FormControl(null, [Validators.required]));
this.createOrganisationForm.addControl('addressPostcode', new FormControl(null, [Validators.required, OrgValidators.postcodeValidator]));
However, I'm facing an issue where they lose the 'address' grouping. I attempted to include the address details in an object like this:
let addressGroup = {
addressLineOne: ['', Validators.required],
addressLineTwo: ['', Validators.required],
addressLineThree: [''],
addressPostcode: ['', [Validators.required, OrgValidators.postcodeValidator]]
}
and then added it using the following code:
this.createOrganisationForm.addControl('address', addressGroup);
but unfortunately, I encountered the error:
is not assignable to parameter of type 'AbstractControl'.
Could someone please guide me on how to properly add a group of controls to a parent control using the .addControl
method?
Thank you