Type 'AbstractControl | null' is not assignable to type 'FormGroup'

Question

I have problem passing [formGroup] to children components in Angular. It says Type 'AbstractControl | null' is not assignable to type 'FormGroup'. I think i have put all safe conditions and I have initialize it well. I don't understand why is this still happening. The error is on this [formGroup]="linkAccounts?.get('bank')" in 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);
}

Answer 1

You have to cast the linkAccounts?.get('bank') to a FormGroup to be assignable to the formGroup, because the type of the form controls is AbstractControl | null.

#1 Solution: using a getter with FormGroup type:

get bankFormGroup(): FormGroup {
  return this.linkAccountsForm?.get('bank') as FormGroup;
}

<div [formGroup]="linkAccounts" *ngIf="step === 2">
  <app-bank [parentForm]="linkAccounts" [formGroup]="bankFormGroup"></app-bank>
  <button type="submit" class="custom-login-button">Done</button>
</div>

#2 Solution: using a $any() casting in the component template:

<div [formGroup]="linkAccounts" *ngIf="step === 2">
  <app-bank
    [parentForm]="linkAccounts"
    [formGroup]="$any(linkAccounts?.get('bank'))"
  ></app-bank>
  <button type="submit" class="custom-login-button">Done</button>
</div>