Tengo problemas para pasar [formGroup] a componentes secundarios en Angular. Dice Type 'AbstractControl | null' is not assignable to type 'FormGroup' . Creo que he puesto todas las condiciones seguras y lo he inicializado bien. No entiendo por qué sigue pasando esto. El error está en este [formGroup]="linkAccounts?.get('bank')" en link-accounts.component.html
registro.componente.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], }), });registro.componente.html
<form [formGroup]="linkAccountsForm" (ngSubmit)="onLinkAccount(linkAccountsForm)" > <app-link-accounts [linkAccounts]="linkAccountsForm" [step]="step" [submitted]="submitted" ></app-link-accounts> </form>enlace-cuentas.component.ts
@Input() linkAccounts!: FormGroup; @Input() step!: number; @Input() submitted!: boolean;enlace-cuentas.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>banco.componente.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); }linkAccounts?.get('bank') a un FormGroup para poder asignarlo a formGroup , porque el type de los controls de formulario es AbstractControl | null
Solución n.º 1: usar un getter con el tipo FormGroup :
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> Solución n.° 2: usar una conversión de $any() en la plantilla del componente:
<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>