Angular 表单 FormArrayName 指令

在Angular中，FormArrayName指令用于表单中的动态元素数组，它与FormGroup和FormControl一样，也是用于表单数据绑定的指令。使用FormArrayName指令可以方便的处理表单中的动态元素数组。

语法

使用FormArrayName指令时需要引入ReactiveFormsModule，并通过formGroupName指定表单中的FormGroup实例。

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

在这个表单中，我们使用div标签来代表表单中的动态元素数组。我们在div中使用ngFor指令循环渲染表单中的动态元素，然后使用formControlName指令将每个动态元素分别与表单中的FormControl进行绑定。

示例

我们假设有一个需求，需要用户通过表单来添加一个TodoList。一个TodoList包含多个TodoItem，我们需要使用一个按钮来进行添加TodoItem操作。

我们可以通过FormBuilder来创建表单实例，并使用FormArrayName来绑定TodoItem数组。

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-todolist',
  templateUrl: './todolist.component.html',
  styleUrls: ['./todolist.component.css']
})
export class TodolistComponent {

  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = fb.group({
      items: fb.array([])
    });
  }

  get items(): FormArray {
    return this.myForm.get('items') as FormArray;
  }

  addItem() {
    this.items.push(this.fb.control(''));
  }

  onSubmit() {
    console.log(this.myForm.value);
  }

}

在表单中，我们可以使用addItem方法来动态的往表单中添加TodoItem。在表单提交时，我们可以打印出表单中的value，这个value中包含了TodoItem数组。

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div formArrayName="items">
    <div *ngFor="let item of items.controls; let i=index">
      <input type="text" [formControlName]="i">
    </div>
  </div>
  <button type="button" (click)="addItem()">添加TodoItem</button>
  <button type="submit">提交</button>
</form>

以上就是使用Angular表单FormArrayName指令的基本介绍和示例代码。在真实的开发中，我们可以按需使用FormArrayName指令来解决表单中的动态元素数组问题。