Here is a form declaration for reference:
this.form = this.fb.group({
party: this.fb.group({
name: [null, Validators.required],
givenName: [null, Validators.required],
surname: [null, Validators.required],
address: [""],
}),
role: this.fb.group({
mobile: [""],
landline: [""],
email: [null, (c: AbstractControl) => {
if (!c.value)
return null;
return Validators.email(c);
}],
})
});
The goal is to extract the party form group into a new component with its validation and HTML.
How can the this.form.party be initialized and passed into a child component responsible for creating the fields and validators?
export class PartyDetailsComponent implements OnInit {
@Input group: FormGroup; // To be created in the parent component
constructor(
private readonly fb: FormBuilder,
private readonly logger: NGXLogger
) {
}
ngOnInit() {
// How should I correctly assign this to the parent `party`?
this.fb.group({
name: [null, Validators.required],
givenName: [null, Validators.required],
surname: [null, Validators.required],
address: [""],
});
};
}