如何使用角度为 2 的数组中的表单

Question

我一直在使用链接中显示的反应形式

 https://plnkr.co/edit/ApCn3YicMjfm2vhSOudj?p=preview

这是我的表格

<div *ngFor="let item of data; let index = index">
  <form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
    <label>
            <span>Full name</span>
            <input type="text" placeholder="Name" formControlName="name">
          </label>
    <div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('required')">
      Name is required
    </div>
    <div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('minlength')">
      Minimum of 2 characters
    </div>
    <div formGroupName="account">
      <label>
              <span>Email address</span>
              <input type="email" placeholder="Email" formControlName="email">
            </label>
      <div class="error" *ngIf="user.get('account').get('email').hasError('required') && user.get('account').get('email').touched">
        Email is required
      </div>
      <label>
              <span>Confirm address</span>
              <input type="email" placeholder="Address" formControlName="confirm">
            </label>
      <div class="error" *ngIf="user.get('account').get('confirm').hasError('required') && user.get('account').get('confirm').touched">
        Confirming email is required
      </div>
    </div>
    <button type="submit" [disabled]="user.invalid">Sign up</button>
  </form>
</div>

但我的问题是我有一个 ngFor，每次我提交表单时它都会将数据推送到数组。

如果我想提交我的第一个数组并将数据推送到我的数据数组的位置 0，我该怎么做，如果我提交我的第二个表单，它会将数据推送到位置 1

但是我的第二个表单应该是空的

Answer 1

也许你想像这样使用表单数组：

@Component({
  selector: 'signup-form',
  template: `
    <form novalidate (ngSubmit)="onSubmit()" [formGroup]="users">
      <div formArrayName="data">
        <ng-container *ngFor="let user of fData.controls; index as i">
          <div [formGroupName]="i">
            <label>
              <span>Full name</span>
              <input type="text" placeholder="Name" formControlName="name">
            </label>
            <div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('required')">
              Name is required
            </div>
            <div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('minlength')">
              Minimum of 2 characters
            </div>
            <div formGroupName="account">
              <label>
                <span>Email address</span>
                <input type="email" placeholder="Email" formControlName="email">
              </label>
              <div
                class="error"
                *ngIf="user.get('account').get('email').hasError('required') && user.get('account').get('email').touched">
                Email is required
              </div>
              <label>
                <span>Confirm address</span>
                <input type="email" placeholder="Address" formControlName="confirm">
              </label>
              <div
                class="error"
                *ngIf="user.get('account').get('confirm').hasError('required') && user.get('account').get('confirm').touched">
                Confirming email is required
              </div>
            </div>
            <button type="submit" [disabled]="user.invalid">Sign up</button>
          </div>
        </ng-container>
      </div>
    </form>
  `
})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  users: FormGroup;

  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.user = this.buildGroup();
    this.users = this.fb.group({
      data: this.fb.array([this.user])
    });
  }
  get fData() {
    return this.users.get('data') as FormArray;
  }
  buildGroup() {
    return this.fb.group({
      name: ['', [Validators.required, Validators.minLength(2)]],
      account: this.fb.group({
        email: ['', Validators.required],
        confirm: ['', Validators.required]
      })
    });
  }
  onSubmit() {
    this.fData.push(this.buildGroup());
    const {valid, value} = this.fData;
    console.log(valid, value);
  }
}

基本上，我们使用FormArray 处理数据数组，然后循环遍历它。

在模板中，每次循环遍历数组项时，Angular 都会将当前的 AbstractControl 存储在index 变量中（上面是i）。

您可以在此处查看表单：https://plnkr.co/edit/E5Qzm85LksSCZAloXZz5?p=preview

这里的API文档：https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html

您可以使用at、removeAt等在特定索引处访问或删除。