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

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

  1. 使用angular开发表单,其中一个字段是字符串数组,如何进行读写?
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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(''));
}
}
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('')); } }
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. 在模板中渲染表单:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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. 在组件中读取和写入表单数据:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// 读取表单数据
const myFieldValues = this.myForm.get('myField').value;
// 写入表单数据
this.myForm.patchValue({
myField: ['value1', 'value2', 'value3']
});
// 读取表单数据 const myFieldValues = this.myForm.get('myField').value; // 写入表单数据 this.myForm.patchValue({ myField: ['value1', 'value2', 'value3'] });
// 读取表单数据
const myFieldValues = this.myForm.get('myField').value;

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

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