Angular2：“AbstractControl”类型上不存在属性“controls”。通过索引访问 formarray 中对象的 .control 时出错

ABS

使用Angular2开发Web应用程序时，我们经常需要处理表单输入。Angular2提供了ABStractControl类来处理表单控件的验证和状态管理。然而，最近我在使用ABStractControl时遇到了一个问题，即在访问FormArray中的对象时出现了一个错误。在这篇文章中，我将分享我遇到的问题以及如何解决它。

在Angular2中，FormArray是一种特殊类型的表单控件，它允许我们动态添加和删除表单组。每个表单组都是一个ABStractControl对象，我们可以通过索引访问它。然而，在尝试访问FormArray中的ABStractControl对象的.control属性时，我遇到了一个错误，提示ABStractControl类型上不存在属性"controls"。

为了更好地理解这个问题，让我们看一个简单的示例代码。假设我们有一个表单，其中包含一个FormArray，它包含多个FormGroup。每个FormGroup都有一个名为"username"的FormControl。

typescript
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, FormArray } from '@angular/forms';
@Component({
  selector: 'app-root',
  template: <code>
    <form [formGroup]="myForm">
      <div formArrayName="users">
        <div *ngFor="let user of users.controls; let i = index">
          <div [formGroupName]="i">
            <input formControlName="username">
          </div>
        </div>
      </div>
    </form>
  </code>,
})
export class AppComponent {
  myForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      users: this.fb.array([
        this.fb.group({
          username: ''
        })
      ])
    });
  }
  get users() {
    return this.myForm.get('users') as FormArray;
  }
}

在上面的代码中，我们创建了一个包含FormArray的表单。在模板中，我们通过使用*ngFor循环来遍历FormArray中的每个FormGroup，并在每个FormGroup中显示一个输入框来输入用户名。然后，我们使用formControlName指令将输入框与FormGroup的username FormControl绑定在一起。

然而，当我们尝试运行这段代码时，会出现一个错误，提示ABStractControl类型上不存在属性"controls"。这是因为我们在访问FormArray中的ABStractControl对象时使用了错误的属性。在FormArray中，我们应该使用controls而不是control。

为了解决这个问题，我们只需将代码中的.control更改为.controls即可。修改后的代码如下：

typescript
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, FormArray } from '@angular/forms';
@Component({
  selector: 'app-root',
  template: <code>
    <form [formGroup]="myForm">
      <div formArrayName="users">
        <div *ngFor="let user of users.controls; let i = index">
          <div [formGroupName]="i">
            <input formControlName="username">
          </div>
        </div>
      </div>
    </form>
  </code>,
})
export class AppComponent {
  myForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      users: this.fb.array([
        this.fb.group({
          username: ''
        })
      ])
    });
  }
  get users() {
    return this.myForm.get('users') as FormArray;
  }
}

现在，当我们运行修改后的代码时，将不再遇到ABStractControl类型上不存在属性"controls"的错误，表单将正常工作。

解决ABStractControl类型上不存在属性"controls"的错误

在上面的示例代码中，我们通过访问FormArray的.controls属性来解决了ABStractControl类型上不存在属性"controls"的错误。这是因为FormArray是一个由ABStractControl对象组成的数组，我们需要使用.controls属性来访问其中的每个ABStractControl对象。

在处理Angular2表单时，我们需要确保我们使用了正确的属性和方法来访问和操作表单控件。在使用FormArray时，记得使用.controls属性来访问其中的ABStractControl对象。

：

在本文中，我分享了我在使用ABStractControl时遇到的问题，并提供了解决此问题的示例代码。通过访问FormArray的.controls属性，我们可以正确地访问和操作其中的ABStractControl对象。在开发Angular2应用程序时，确保我们使用了正确的属性和方法来处理表单控件非常重要，这将帮助我们避免类似的错误。希望这篇文章对你有所帮助！