Angular 4 类型“AbstractControl”上不存在属性“controls”[重复]

ABS

Angular 4 类型“ABStractControl”上不存在属性“controls”[重复]

在使用Angular 4进行开发时，我们可能会遇到类型“ABStractControl”上不存在属性“controls”的错误。这个错误通常会在我们尝试访问表单控件的子控件时出现。本文将详细介绍这个错误的原因以及如何解决它。

问题原因

当我们在Angular中创建表单时，每个表单控件都被包装在一个抽象类ABStractControl的实例中。这个抽象类是Angular表单的基础，它提供了一些共享的方法和属性，例如值的验证和状态管理。

但是，ABStractControl并没有一个名为“controls”的属性。因此，当我们尝试访问一个控件的子控件时，Angular会抛出一个错误，提示该属性不存在。

解决方法

要解决这个问题，我们需要使用特定类型的控件来访问子控件。具体来说，我们可以使用FormGroup或FormArray来包装我们的表单控件。

FormGroup是一组相关的表单控件的集合，它提供了对子控件的访问和管理。FormArray是一个类似数组的结构，用于处理动态的表单控件集合。

下面是一个简单的示例，展示如何使用FormGroup和FormArray来解决这个问题：

typescript
import { Component } from '@angular/core';
import { FormGroup, FormControl, FormArray } from '@angular/forms';
@Component({
  selector: 'app-form',
  template: <code>
    <form [formGroup]="myForm">
      <div formArrayName="items">
        <div *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
          <input formControlName="name" placeholder="Name">
          <input formControlName="age" placeholder="Age">
        </div>
      </div>
    </form>
  </code>
})
export class FormComponent {
  myForm: FormGroup;
  constructor() {
    this.myForm = new FormGroup({
      items: new FormArray([
        new FormGroup({
          name: new FormControl(),
          age: new FormControl()
        }),
        new FormGroup({
          name: new FormControl(),
          age: new FormControl()
        })
      ])
    });
  }
  get items() {
    return this.myForm.get('items') as FormArray;
  }
}

在这个例子中，我们首先创建了一个FormGroup实例，并将它绑定到模板中的formGroup属性上。然后，我们在这个FormGroup中创建了一个名为items的FormArray，并在其中添加了两个子FormGroup，每个都包含一个名为name和age的FormControl。

在模板中，我们使用formArrayName指令来指定我们要访问的FormArray。然后，我们使用*ngFor循环遍历items.controls，获取每个子FormGroup。在每个子FormGroup中，我们使用formGroupName指令来指定我们要访问的子控件，并使用formControlName指令来指定子控件的名称。

通过使用正确的控件类型，我们成功地解决了类型“ABStractControl”上不存在属性“controls”的问题。

在使用Angular 4开发表单时，我们可能会遇到类型“ABStractControl”上不存在属性“controls”的错误。这个错误是由于我们尝试访问表单控件的子控件时使用了错误的控件类型。通过使用FormGroup和FormArray来包装我们的表单控件，我们可以解决这个问题，并正确地访问和管理子控件。希望本文对你理解和解决这个错误有所帮助！