键入“抽象控件 | null' 不可分配给类型 'FormGroup'答案

【问题标题】：Type 'AbstractControl | null' is not assignable to type 'FormGroup'键入“抽象控件 | null' 不可分配给类型 'FormGroup'
【发布时间】：2021-11-08 14:50:19
【问题描述】：

我在将 [formGroup] 传递给 Angular 中的子组件时遇到问题。它说Type 'AbstractControl | null' is not assignable to type 'FormGroup'。我想我已经设置了所有安全条件并且我已经很好地初始化了它。我不明白为什么这仍然发生。错误在link-accounts.component.html中的这个[formGroup]="linkAccounts?.get('bank')"上

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);
}

【问题讨论】：

您能否同时显示bank.component.html 以及有关错误消息的更多上下文？它是否为您提供了发出错误消息的组件？
@ArnaudDenoyelle。我没有在bank.component.html 中添加任何内容。错误在link-accounts.component.html中的这个[formGroup]="linkAccounts?.get('bank')"上
您在bank.component.ts 中没有任何@Input() formGroup，因此[formGroup]="linkAccounts?.get('bank')" 在link-accounts.component.html 中似乎无效。我不希望出现此错误消息
@ArnaudDenoyelle 来自bank.component.ts 的值来自link 和link 来自register。整个表单在 register 中初始化

标签： angular typescript angular-reactive-forms angular-forms

【解决方案1】：

您必须将linkAccounts?.get('bank') 转换为FormGroup 才能分配给formGroup，因为controls 形式的type 是AbstractControl | null。

#1 解决方案：使用带有FormGroup 类型的getter：

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 解决方案：在组件模板中使用$any() 转换：

<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>

【讨论】：

#2 解决方案有效，谢谢！