typescript - “AbstractControl”类型缺少“FormGroup”类型的以下属性：控件、registerControl、addControl、removeControl 和另外 3 个

Question

我们最近从 ng 7.2.15 和 typescript 3.2.4 升级到 angular v8.2.14 和 typescript v3.5.3。将表单组从父组件传递到子组件不再有效。

下面是我的子组件：子组件。ts

@Component({selector:'edit-overview'})
    export class ChildComponent implements OnInit {  
       public OverviewFormGroup : FormGroup
       constructor(private controlContainer: ControlContainer) {
       }

    ngOnInit() {
    this.OverviewFormGroup = <FormGroup>this.controlContainer.control;
    }
    }

child.component.html

<div [formGroup] ='OverviewFormGroup'>
</div>

和我的父组件

Parent.component.html

<div [formGroup]="Form1">
      <edit-overview [formGroup] = "Form1.controls.OverviewFormGroup">
      </edit-overview>
</div>

父组件.ts

export class ParentComponent {
constructor(private readonly fb: FormBuilder) {
this.Form1 = this.fb.group({
 name: new FormControl('', [Validators.required]),
 OverviewFormGroup: new FormGroup({
        description: new FormControl('', [Validators.nullValidator])
      })
})
}
}

它会引发此错误：“AbstractControl”类型缺少“FormGroup”类型的以下属性：控件、registerControl、addControl、removeControl 以及父模板行中的另外 3 个属性。

早先将表单组从父级传递给子级不再是问题。我在这里错过了什么吗？我已经在表单组声明中为控件赋值。

标签： typescriptangular8angular-reactive-forms

Answer 1

好问题，这是一个晦涩难懂的错误。错误来自类型安全功能！因为 Angular 无法从您访问它的方式知道它是一个表单组（它只知道它是一个AbstractFormControl），所以您需要告诉它！

选项 1：as用于使类型显式

例如，如果您有：

  mainForm: FormGroup = this.formBuilder.group({
    name: ['Max'],
    address: this.formBuilder.group({
      street: ['PayneStreet'],
      zip: [50000]
    })
  });

为了让 Angular 知道你实际上是在访问一个表单控件，你需要告诉它：

  get addressForm() {
    return this.mainForm.get('address') as FormGroup;
  }

重要的部分是as FormGroup. 像这样 Angular 知道它实际上是一个FormGroup而不仅仅是一个抽象的表单控件。然后你可以继续在 html 中使用它：

<app-address-form [addressForm]="addressForm"></app-address-form>

在这里找到 stackblitz： https ://stackblitz.com/edit/angular-nested-forms-input

选项 2（首选）：单独定义嵌套组

实际上，单独构建第二个表单然后将其附加到主表单更容易且类型更安全：

  addressForm = this.formBuilder.group({
    street: ["PayneStreet"],
    zip: [50000]
  });

  mainForm: FormGroup = this.formBuilder.group({
    name: ["Max"],
    address: this.addressForm
  });

并在 html 中（同上）

  <app-address-form [addressForm]="addressForm"></app-address-form>

像这样，Angular 已经知道它addressForm是类型FormGroup而不仅仅是类型AbstractFormControl

Stackblitz：https ://stackblitz.com/edit/angular-nested-forms-input-2