Javascript 将formcontrol、formgrops和formarray添加到复制的html中

我正在做一个添加表单，因此我需要为ts中输入的所有这些值设置表单控件，表单组。这可能是正常的内容。但这里我有非常不同的。我有一个添加按钮，它复制html中的一组表单。我发现很难在ts中为它编写formgroup逻辑和验证器。

---

如果您知道，请提供帮助（您至少可以告诉我如何设置formcontrol名称并将其带到ts）

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

---

我的stackblitz链接：

你可以像下面那样声明你的表单组

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

<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;
}

并在用户单击Add按钮时调用此函数。 在模板中显示表单。循环使用FormControl并如下所示绑定它

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

<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;
}

名称
名称是必需的
价值

您对total的验证如下所示

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

<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;
}

isValidTotal（）{
var values=this.myForm.controls.map（（x）=>
x？数字（x.value.value）：0
);
让sumTotal=values.reduce（（a，b）=>a+b）；
return sumTotal您可以像下面那样声明您的FormGroup

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

<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;
}

并在用户单击Add按钮时调用此函数。
在模板中显示表单。循环FormControl并如下所示绑定它

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

<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;
}


名称
名称是必需的
价值

您对total的验证如下所示

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

<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;
}

isValidTotal（）{
var values=this.myForm.controls.map（（x）=>
x？数字（x.value.value）：0
);
让sumTotal=values.reduce（（a，b）=>a+b）；
return sumTotal需要什么样的验证器以及您当前被卡在哪里？值名称和年龄（所有表单字段）所需的验证程序您至少可以告诉我如何设置formcontrol名称，并将其带到ts@Vimalpatel给我一些时间，将提供一个代码示例。现有功能是什么？需要什么验证程序以及您当前的位置？值名称和年龄（所有formfields）所需的验证器您至少可以告诉我如何设置formcontrol名称并将其带到ts@Vimalpatel给我一些时间，将提供一个代码示例。现有的功能是什么？我已经用另一种方式解决了它，兄弟。无论如何，谢谢@Vimal也请分享您的解决方案。当然，我已经发布了一个问题，一个困难的问题，可以吗哥们，我已经用另一种方式解决了，哥们。无论如何，谢谢@vimalPlease，也请分享你的解决方案。当然，我已经发布了一个问题，一个很难的问题，你能检查一下吗，哥们