将 formcontrol、formgrops 和 formarray 添加到重复的 html 角度

Question

我正在做一个 add 表单，我需要为 ts 中输入的所有这些值设置 formcontrol、formgroup 设置。它可能是正常的东西。但在这里我有很大的不同。我有一个 add 按钮，它复制了 html 中的一组表单。我发现很难在 ts 中为它编写表单组逻辑和验证器。 如果您知道，请提供帮助（您至少可以告诉我如何设置表单控件名称并将其带到 ts）

注意：如果我的问题不清楚，请在下方评论。

我的 stackblitz 链接：https://stackblitz.com/edit/angular-ivy-g8cty1?file=src%2Fapp%2Fapp.component.html

Answer 1

您可以像下面这样声明您的 FormGroup。

myForm = new FormArray([]);
addRow() {
    const group = new FormGroup({
      firstName: new FormControl("", [Validators.required]),
      value: new FormControl("", [Validators.required])
    });
    this.myForm.push(group);
}

并在用户单击添加按钮时调用此函数。 在模板中显示表格。遍历 FormControl 并像下面这样绑定它。

<div *ngFor="let form of myForm.controls;">
    <ng-container [formGroup]="form">
      <div>
        <label>Name</label
        ><input type="text" required formControlName="firstName" />
      </div>
      <span class="text-danger" *ngIf="isInValidFormControl(form,'firstName')">
        Name is required
      </span>
      <div>
        <label>Value</label><input type="text" formControlName="value" />
      </div>
    </ng-container>
</div>

您对总计的验证如下所示。

isValidTotal() {
    var values = this.myForm.controls.map((x) =>
      x ? Number(x.value.value) : 0
    );
    let sumTotal = values.reduce((a, b) => a + b);
    return sumTotal <= this.total;
}

你可以像这样从模板中调用它。

  <button (click)="addRow()" [disabled]="!isValidTotal()">Add</button>
  <button (click)="submit()" [disabled]="!isValidTotal()">Submit</button>
  <div *ngIf="!isValidTotal()">
    <p>{{errorMessage}}</p>
  </div>

工作沙盒

https://codesandbox.io/s/formarraydynamic-rqdhc?file=/src/app/app.component.html