I am facing an issue with passing the [formGroup] to child components in Angular. The error message says
Type 'AbstractControl | null' is not assignable to type 'FormGroup'[formGroup]="linkAccounts?.get('bank')"link-accounts.component.html
register.component.ts
linkAccountsForm = this.formBuilder.group({
bank: this.formBuilder.group({
bank_name: [null, Validators.required],
account_name: [null, Validators.required],
account_number: [null, Validators.required],
swift_code: [null, Validators.required],
}),
credit_card: this.formBuilder.group({
name: [null, Validators.required],
card_number: [null, Validators.required],
cvc: [null, Validators.required],
exp_date: [null, Validators.required],
}),
});
register.component.html
<form
[formGroup]="linkAccountsForm"
(ngSubmit)="onLinkAccount(linkAccountsForm)"
>
<app-link-accounts
[linkAccounts]="linkAccountsForm"
[step]="step"
[submitted]="submitted"
></app-link-accounts>
</form>
link-accounts.component.ts
@Input() linkAccounts!: FormGroup;
@Input() step!: number;
@Input() submitted!: boolean;
link-accounts.component.html
<div [formGroup]="linkAccounts" *ngIf="step === 2">
<app-bank
[parentForm]="linkAccounts"
[formGroup]="linkAccounts?.get('bank')"
></app-bank>
<button type="submit" class="custom-login-button">Done</button>
</div>
bank.component.ts
public bank!: FormGroup;
@Input() parentForm!: FormGroup;
constructor(private controlContainer: ControlContainer) {}
public ngOnInit(): void {
this.bank = this.controlContainer.control as FormGroup;
console.log(this.logForms)
}
public logForms(): void {
console.log('Hobbies form', this.bank);
console.log('Parent (Hero) form', this.parentForm);
}