Angular 4：类型“AbstractControl”上不存在属性“push”和“controls”

ABS

Angular 4：类型“ABStractControl”上不存在属性“push”和“controls”

在开发Angular应用程序时，您可能会遇到类型“ABStractControl”上不存在属性“push”和“controls”的错误。这个错误通常出现在尝试在表单控件中添加更多的控件或访问控件数组时。在本文中，我们将探讨这个错误的原因，并提供解决方案来解决它。

首先，让我们了解一下Angular中的ABStractControl。ABStractControl是一个抽象类，用于表示表单控件的基本功能。它是FormControl、FormGroup和FormArray的父类。FormControl表示单个表单控件，FormGroup表示一组相关的表单控件，而FormArray表示一个动态增长的表单控件数组。

当我们在Angular应用程序中使用表单时，我们通常会使用FormGroup或FormArray来组织和管理表单控件。FormGroup用于组织一组相关的表单控件，而FormArray用于管理动态增长的表单控件数组。

然而，当我们尝试在ABStractControl或其子类中使用push和controls属性时，就会出现类型“ABStractControl”上不存在属性“push”和“controls”的错误。这是因为ABStractControl类本身并没有定义这些属性。

那么，如何解决这个错误呢？解决方法取决于您尝试实现的功能。接下来，我们将根据不同的情况提供解决方案。

解决FormGroup中的错误

如果您在FormGroup中尝试使用push和controls属性，那么很可能是因为您试图向FormGroup中添加更多的控件。在FormGroup中，您应该使用addControl方法来添加新的控件。

以下是一个示例，展示了如何向FormGroup中添加新的控件：

typescript
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'app-example',
  template: <code>
    <form [formGroup]="myForm">
      <input type="text" formControlName="name">
      <button (click)="addControl()">Add Control</button>
    </form>
  </code>
})
export class ExampleComponent {
  myForm: FormGroup;
  constructor() {
    this.myForm = new FormGroup({
      name: new FormControl('')
    });
  }
  addControl() {
    this.myForm.addControl('emAIl', new FormControl(''));
  }
}

在上面的示例中，我们创建了一个名为myForm的FormGroup，并将一个名为name的FormControl添加到其中。当用户点击“Add Control”按钮时，我们调用addControl方法，将一个名为emAIl的新FormControl添加到FormGroup中。

解决FormArray中的错误

如果您在FormArray中使用push和controls属性，那么很可能是因为您试图向FormArray中添加更多的控件。在FormArray中，您应该使用push方法来添加新的控件。

以下是一个示例，展示了如何向FormArray中添加新的控件：

typescript
import { Component } from '@angular/core';
import { FormArray, FormControl } from '@angular/forms';
@Component({
  selector: 'app-example',
  template: <code>
    <form [formGroup]="myForm">
      <div formArrayName="items">
        <div *ngFor="let item of items.controls; let i = index">
          <input type="text" [formControlName]="i">
        </div>
      </div>
      <button (click)="addControl()">Add Control</button>
    </form>
  </code>
})
export class ExampleComponent {
  myForm: FormGroup;
  get items() {
    return this.myForm.get('items') as FormArray;
  }
  constructor() {
    this.myForm = new FormGroup({
      items: new FormArray([new FormControl('')])
    });
  }
  addControl() {
    this.items.push(new FormControl(''));
  }
}

在上面的示例中，我们创建了一个名为myForm的FormGroup，并在其中创建了一个名为items的FormArray。在模板中，我们使用*ngFor指令循环遍历items.controls数组，并为每个控件创建一个输入框。当用户点击“Add Control”按钮时，我们调用addControl方法，将一个新的FormControl添加到FormArray中。

当在Angular应用程序中使用表单控件时，我们需要注意使用适当的方法来添加新的控件。如果在ABStractControl或其子类中尝试使用push和controls属性，将会出现类型“ABStractControl”上不存在属性“push”和“controls”的错误。根据您尝试实现的功能，您应该使用addControl方法（对于FormGroup）或push方法（对于FormArray）来添加新的控件。这样可以避免引起错误，并正确地组织和管理表单控件。