将formcontrol、formgrops和formarray添加到重复的html angular中

Question

我正在做一个添加表单，为此我需要为ts中输入的所有这些值设置表单控制、窗体组。这可能是正常的事情。但在这里，我有非常不同的东西。我有一个添加按钮，它复制了html中的一组表单。我发现很难在ts中为它编写formgroup逻辑和验证器。如果你知道，请帮忙(你至少可以告诉我如何设置表单控件名称并将其带到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);
}

并在用户单击"添加"按钮时调用此函数。在Template中显示表单。循环通过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