使用ng-for从Angular中动态创建的文本框中获取数据

在Angular中，*ngFor 是一个结构指令，用于基于数组中的项动态创建DOM元素。如果你想从使用 *ngFor 动态创建的文本框中获取数据，你可以使用Angular的双向数据绑定和表单控件来实现。

基础概念

双向数据绑定：Angular允许你在组件类和模板之间同步数据。
表单控件：Angular提供了多种表单控件，如 FormControl，用于跟踪表单字段的值。

类型与应用场景

模板驱动表单：适用于简单的表单场景。
响应式表单：适用于复杂的表单场景，提供更好的控制和灵活性。

示例代码

假设我们有一个数组 items，我们想为每个项创建一个文本框，并获取它们的值。

模板驱动表单示例

<!-- app.component.html -->
<form #form="ngForm">
  <div *ngFor="let item of items; let i = index">
    <input type="text" name="item{{i}}" [(ngModel)]="item.value" required>
  </div>
  <button type="button" (click)="submit(form)">Submit</button>
</form>

// app.component.ts
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = [{ value: '' }, { value: '' }];

  submit(form: NgForm) {
    console.log(form.value);
  }
}

响应式表单示例

<!-- app.component.html -->
<form [formGroup]="form">
  <div *ngFor="let item of items; let i = index">
    <input type="text" [formControlName]="'item' + i" required>
  </div>
  <button type="button" (click)="submit()">Submit</button>
</form>

// app.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: FormGroup;
  items = [null, null];

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      item0: [''],
      item1: ['']
    });
  }

  submit() {
    console.log(this.form.value);
  }
}