title: Type 'AbstractControl | null' is not assignable to type 'FormGroup'
body: <p>I have problem passing <code>[formGroup]</code> to children components in Angular. It says <code>Type 'AbstractControl | null' is not assignable to type 'FormGroup'</code>. 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 <code>[formGroup]=&quot;linkAccounts?.get('bank')&quot;</code> in <code>link-accounts.component.html</code></p>
  <p><strong>register.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>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],
    }),
  });
  </code></pre>
  <p><strong>register.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;form
    [formGroup]=&quot;linkAccountsForm&quot;
    (ngSubmit)=&quot;onLinkAccount(linkAccountsForm)&quot;
  &gt;
    &lt;app-link-accounts
      [linkAccounts]=&quot;linkAccountsForm&quot;
      [step]=&quot;step&quot;
      [submitted]=&quot;submitted&quot;
    &gt;&lt;/app-link-accounts&gt;
  &lt;/form&gt;
  </code></pre>
  <p><strong>link-accounts.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code> @Input() linkAccounts!: FormGroup;
   @Input() step!: number;
   @Input() submitted!: boolean;
  </code></pre>
  <p><strong>link-accounts.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div [formGroup]=&quot;linkAccounts&quot; *ngIf=&quot;step === 2&quot;&gt;
    &lt;app-bank
      [parentForm]=&quot;linkAccounts&quot;
      [formGroup]=&quot;linkAccounts?.get('bank')&quot;
    &gt;&lt;/app-bank&gt;
    &lt;button type=&quot;submit&quot; class=&quot;custom-login-button&quot;&gt;Done&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>bank.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>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);
  }
  </code></pre>