时间戳

首页 > 解决方案 > 如何与验证一起动态循环表单控件名称

html - 如何与验证一起动态循环表单控件名称

问题描述

我想在选择字段中验证动态 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 文件中，我硬编码了 spotstressname1、spotstressname2 等。我需要动态地作为输出而不是硬编码值。我怎样才能得到那个？

标签： htmlangulartypescriptangular7

解决方案

首先...不要将 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>

堆栈闪电战演示

推荐阅读