Angular 24 编辑表单填充 FormArray 控件

typescript

Angular 2/4 编辑表单填充 FormArray 控件

在 Angular 2/4 中，表单是我们开发中常用的一部分。而在表单中，填充 FormArray 控件是一项常见的需求。本文将介绍如何使用 Angular 2/4 来编辑表单并填充 FormArray 控件。

表单编辑

在 Angular 2/4 中，我们可以使用 FormBuilder 来创建表单并进行编辑。首先，我们需要在组件中引入 ReactiveFormsModule，这样才能使用表单控件。然后，我们可以在组件的构造函数中注入 FormBuilder。

typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
  selector: 'app-form-editor',
  templateUrl: './form-editor.component.html',
  styleUrls: ['./form-editor.component.CSS']
})
export class FormEditorComponent implements OnInit {
  form: FormGroup;
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.form = this.fb.group({
      items: this.fb.array([])
    });
  }
}

在上面的代码中，我们创建了一个空的 FormGroup，并在其中定义了一个名为 items 的 FormArray。

接下来，我们需要在 HTML 模板中显示表单控件。我们可以使用 *ngFor 指令来遍历 FormArray，并为每个元素创建一个表单控件。

html
<form [formGroup]="form">
  <div formArrayName="items">
    <div *ngFor="let item of form.get('items').controls; let i = index">
      <input type="text" [formControlName]="i">
    </div>
  </div>
</form>

在上面的代码中，我们使用 formArrayName 指令来绑定表单控件到 items FormArray。然后，使用 *ngFor 指令遍历 FormArray 的 controls 属性，为每个元素创建一个 input 控件，并使用 [formControlName] 指令将控件绑定到对应的索引。

接下来，我们可以通过代码来填充 FormArray 控件。我们可以使用 FormArray 的 push 方法来添加新的控件。

typescript
addItem() {
  const items = this.form.get('items') as FormArray;
  items.push(this.fb.control(''));
}

在上面的代码中，我们使用 get 方法获取 items FormArray，并将其转换为 FormArray 类型。然后，我们使用 push 方法向 items 添加一个新的控件。

案例代码

下面是一个完整的例子，展示了如何使用 Angular 2/4 编辑表单并填充 FormArray 控件。

typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
  selector: 'app-form-editor',
  templateUrl: './form-editor.component.html',
  styleUrls: ['./form-editor.component.CSS']
})
export class FormEditorComponent implements OnInit {
  form: FormGroup;
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.form = this.fb.group({
      items: this.fb.array([])
    });
  }
  addItem() {
    const items = this.form.get('items') as FormArray;
    items.push(this.fb.control(''));
  }
}

html
<form [formGroup]="form">
  <div formArrayName="items">
    <div *ngFor="let item of form.get('items').controls; let i = index">
      <input type="text" [formControlName]="i">
    </div>
  </div>
  <button (click)="addItem()">Add Item</button>
</form>

在上述代码中，我们创建了一个表单编辑组件，其中包含一个名为 items 的 FormArray。通过点击按钮，我们可以动态地添加新的表单控件。

本文介绍了如何使用 Angular 2/4 来编辑表单并填充 FormArray 控件。我们首先需要在组件中引入 ReactiveFormsModule，并使用 FormBuilder 来创建表单。然后，我们可以在 HTML 模板中使用 *ngFor 指令遍历 FormArray，并为每个元素创建一个表单控件。通过代码，我们可以动态地添加新的控件。

希望本文对你理解 Angular 2/4 编辑表单填充 FormArray 控件有所帮助。如果你有任何问题或疑问，请随时留言。