I have an Angular form that is composed of multiple FormGroup
sub-forms and should span multiple components. It is initialized on and submitted from parent component, with each child getting a FormGroup
they are responsible for. Controls are made with Angular Material.
The problem is, when I submit the form, validations don't work. They work just fine if the submit button is moved inside the child components, so it is in the same component as a form group I'm validating, but that's not what I'm trying to achieve.
Code examples are below, with dummy names.
Parent template:
<form [formGroup]="mainForm" (ngSubmit)="submitForm()">
<button mat-button mat-raised-button color="primary" type="submit">Save</button>
<first-child [firstChildGroup]="mainForm.get('firstChildGroup')"></first-child>
<second-child [secondChildGroup]="mainForm.get('secondChildGroup')"></second-child>
</form>
Parent TS:
export class ParentComponent implements OnInit {
mainForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.mainForm = this.fb.group({
firstChildGroup: this.fb.group({
one: ['', [Validators.required]] // and other controls with other validators
}),
secondChildGroup: this.fb.group({...})
});
}
}
Child template:
<div [formGroup]="firstChildGroup">
<mat-form-field appearance="fill">
<mat-label>First child group <strong class="text-danger">*</strong></mat-label>
<input matInput formControlName="one">
<mat-error>
Required
</mat-error>
</mat-form-field>
</div>
Child TS:
export class FirstChildComponent {
@Input() firstChildGroup: FormGroup;
}
So, to recap: ParentComponent
passes intialized FormGroup
elements to several child components, but the validation won't work when submit button is on parent. Which it has to be.
Any solution to this? All suggestions are also welcome.