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

<!-- 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);
  }
}