Question

我在ngFor中有一个Form（多个输入字段），我想获取值并对其进行验证，然后将它们添加到Users数组以将其发送回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

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

2 个答案: