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

Posted 2023-03-13

【中文标题】如何与验证一起动态循环表单控件名称

【英文标题】：How to loop the formcontrolname dynamically along with validation

【发布时间】：2020-03-13 22:08:44

【问题描述】：

我想验证选择字段中动态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 等。 我需要动态地作为输出而不是硬编码值。我怎样才能得到它？

【问题讨论】：

检查formArray

【参考方案1】：

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

【讨论】：

感谢您的回复。请帮助我，我想要和你的完全一样，但在提交表单时验证选择选项值。

如果你想在提交后进行验证，我可以建议如下：stackblitz.com/edit/angular-r9tkhb?file=src/app/…

感谢您的回复。您在 .ts 文件中使用数组数据。但是我无法通过使用来自 JSON 文件的相同数据来获得相同的输出。我正在使用服务调用 JSON 数据。它在嵌套数组对象中

请 fork 我的 stackblitz 并模拟 http-request，您可以使用 rxjs of 来完成。我很乐意看看 stackblitz :)

【参考方案2】：

this.data = [
   
     controlName: 'Username',
     controlType: 'text',
     valueType: 'text',
     placeholder: 'Enter username',
     validators: 
       required: true,
       minlength: 5
    
   ,  
  
    controlName: 'Deposit From',
    controlType: 'date',
    valueType: 'date',
    placeholder: 'Deposit From',
    modelVal:"depositFrom",
    validators: 
      required: true
    
  ];

this.data.forEach(formControl => 
      formGroup[formControl.controlName] = new FormControl('');
    );