使用angular开发表单，其中一个字段是字符串数组，如何进行读写？

夏 亮

在Angular中，可以使用FormArray来处理字符串数组字段。下面是一个简单的示例：

  1. 使用angular开发表单，其中一个字段是字符串数组，如何进行读写？
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      // 其他字段...
      myField: this.fb.array([])
    });
  }

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

  addMyField() {
    this.myField.push(this.fb.control(''));
  }
}

2. 在模板中渲染表单：

<form [formGroup]="myForm">
  <!-- 其他字段... -->
  <div formArrayName="myField">
    <div *ngFor="let item of myField.controls; let i = index">
      <input [formControlName]="i">
    </div>
  </div>
  <button (click)="addMyField()">添加字段</button>
</form>

3. 在组件中读取和写入表单数据：

// 读取表单数据
const myFieldValues = this.myForm.get('myField').value;

// 写入表单数据
this.myForm.patchValue({
  myField: ['value1', 'value2', 'value3']
});

上述示例中，myField是一个FormArray，每个元素都是一个FormControl。可以使用push()方法向FormArray中添加元素，并使用formControlName指定每个FormControl的名字。FormArray也有value属性，可以使用它来读取表单数据。如果要写入表单数据，可以使用patchValue()方法，传入一个对象来更新表单的值。