如何在 *ngFor Angular 中获取值并验证输入

Question

我在ngFor 中有一个表单（多个输入字段），我想获取值并验证它们并将它们添加到用户数组以将其发送回 API。

  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <div *ngFor="let user of users">
      <div class="form-group">
          <label>First Name</label>
          <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
          <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
              <div *ngIf="f.firstName.errors.required">First Name is required</div>
          </div>
      </div>
      <div class="form-group">
          <label>Last Name</label>
          <input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" />
          <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
              <div *ngIf="f.lastName.errors.required">Last Name is required</div>
          </div>
      </div>
    </div>

    <div class="form-group">
        <button [disabled]="loading" class="btn btn-primary">Register</button>
    </div>
</form>

.ts

export class AppComponent  {
  users=[ 
    {id: 1},
    {id: 2},
    {id: 3}
  ]


  registerForm: FormGroup;
  submitted = false;
  constructor(private formBuilder: FormBuilder){
    this.registerForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required]
    });
  }

  get f() { return this.registerForm.controls; };

  onSubmit() {
    this.submitted = true;
    // stop here if form is invalid
    if (this.registerForm.invalid) {
        return;
    }
    console.log(this.registerForm.value) // here i am getting value from last edited index.
  }
}

编辑： Stackblitz Exmple

Answer 1

您必须使用 users 数组创建 FormGroup 数组。

试试这个：

component.ts

 this.registerForm = this.formBuilder.group({
      userDetails: this.formBuilder.array(this.users.map(item=>{
       return this.createItem(item) 
      })),
  });

由于 userDetails 控件是 formGroup 的数组，因此您不需要在 html 中使用 users 数组。

component.html

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <div formArrayName="userDetails" *ngFor="let item of registerForm.get('userDetails').controls; let i = index;">
        <div [formGroupName]="i">
            <div class="form-group">
                <label>First Name</label>
                <input type="text" formControlName="firstName" class="form-control"  />
                <div *ngIf="submitted && registerForm.controls['userDetails'].invalid" class="invalid-feedback">
                    <div>First Name is required</div>
                </div>
            </div>
            <div class="form-group">
                <label>Last Name</label>
                <input type="text" formControlName="lastName" class="form-control"  />
                <div *ngIf="submitted && registerForm.controls['userDetails'].invalid" class="invalid-feedback">
                    <div>Last Name is required</div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <button [disabled]="loading" class="btn btn-primary">Register</button>
    </div>
</form>

Example

Answer 2

您不能对数组值使用简单的 FormControl。 formControl 仅适用于单个值，因此只会将最后编辑的值附加到它们，您需要使用 https://angular.io/api/forms/FormArray 为此