如何在验证过程中动态循环FormControl名称 [英] How to loop the formcontrolname dynamically along with validation

问题描述

我要验证选择字段中动态formControlName="xxx"的多重循环

我的html代码

<ul *ngFor="let detaillist of stressli.stresstabdetails;">
    <li>
        <div class="form-container">
            <select [(ngModel)]="detaillist.stressname" class="form-control" formControlName="spotstressname {{q + 1 }}">
                <option [ngValue]="undefined" selected>Select an option</option>
                <option *ngFor="let item of stressdata;" [ngValue]="item">{{item}}</option>
            </select>
        </div>
    </li>
</ul>

TS文件验证：

this.CaseDetailsForm = this.formBuilder.group({
  spotstressname1:['', Validators.required],
  spotstressname2:['', Validators.required],
});

在.ts文件中，我硬编码了点压力名称1、点压力名称2等。 我需要动态作为输出，而不是硬编码值。我怎样才能做到这一点？

推荐答案首先……请勿将ngModel用于被动表单，您需要决定是要使用ngModel还是要使用被动表单，而不是两者都使用！

在此示例中，我们完全是被动的。那么如何动态地创建您的表单控件呢？我会这么做：

constructor(private fb: FormBuilder) {
  this.CaseDetailsForm = this.fb.group({});
}

ngOnInit() {
  // add dynamic form controls named 'spotstressname' and index
  this.stressli.stresstabdetails.map((x, i) => {
    this.CaseDetailsForm.addControl('spotstressname'+i, this.fb.control(x.stressname))
  })
}

然后在模板中，我们可以使用keyvalue管道迭代模板中表单的表单控件：

<div *ngFor="let ctrl of CaseDetailsForm.controls | keyvalue">
  <select [formControlName]="ctrl.key">
    <option value="">Select an option</option>
    <option *ngFor="let item of stressdata;" [value]="item">{{item}}</option>
  </select>
</div>

STACKBLITZ DEMO

这篇关于如何在验证过程中动态循环FormControl名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！