使用 fromGroup 生成的 Angular 动态 formControlName

Question

我创建了一个由 JSON 数组组成的表单，据此，我正在生成 Validation、formControlName 并通过 formGroup 生成输出。

this.ELEMENT_DATA_UPDATE = [
  {
        first_name : 'abc',
        last_name : 'xyz',
        phone : 8888888888
  }
];

在这里，我使用 Angular 材料，因此将此键值对转换为另一个数组，包含

{"key" : "first_name" , "value" : "abc" , "name" : "First name :"}

这是输入 JSON 数组固定的时间。但是我的项目由大规模的数据操作组成，其中输入的 JSON 数组内容将多次更改。生成 UI 模块没有问题，但是当我尝试将 Validation 和 forms 模块应用于这个动态生成的内容时，整个流程崩溃了，

这是我的代码

this.ELEMENT_DATA_UPDATE = [
  {
        first_name : 'abc',
        last_name : 'xyz',
        phone : 8888888888
  }
];

我的代码正在生成以下代码作为字符串

first_name: ['', Validators.required],
last_name: ['', Validators.required],
job_function: ['', [Validators.required]],
title: ['', [Validators.required]],
email: ['', [Validators.required, Validators.email]],
phone : ['',[Validators.required, Validators.minLength(10), Validators.maxLength(10),  Validators.pattern('[0-9 ]*')]]

我希望在 formGroup 内部使用它，以便我可以动态生成 formControls ，为它们分配验证和值。

updateForm = this.formBuilder.group(jsonArray);

Answer 1

补充我的评论，注意：您需要添加验证器（我在您的代码中看不到它们）

this.updateForm=new FormGroup({}) //<--create the formGroup
for(let formModule of this.keyArray){
    this.updateForm.addcontrol(formModule.key,new FormControl(formModule.Value))
}

此外，如果我们在 keyArray 中的对象就像

{ "key" : "key_name" , 
   "value" : "value" , 
   "name" : "Key name" ,
   validators:[Validators.required, Validators.email]
}

我们可以改进我们的循环

for(let formModule of this.keyArray){
    this.updateForm.addcontrol(formModule.key,
          new FormControl(formModule.Value,formModule.validators))
}

好吧，如果我们的对象很难像我展示的那样从服务变成，但我们的服务可能为我们提供这样的对象：

{ "key" : "key_name" , 
   "value" : "value" , 
   "name" : "Key name" ,
   validators:[{type:"required"},{type="min",args:3}]
}

在进行循环之前，我们可以使用

this.keyArray.forEach(x=>
{
   if (x.validators)
   {
      conts validators=[];
      validators.forEach(v=>{
          switch (v.type)
          {
               case "required":
                   validators.push(Validators.required);
                   break;
               case "min":
                   validators.push(Validators.min(v.arg);
                   break;
               ...
          }
      })
      x.validators=validators;
   }
}

要显示错误，我们必须考虑到表单中的控件是

updateForm.get(keyArray.key)

所以，例如

<div class="col-lg-6" *ngFor="let keyArray of keyArray"> 
   <mat-form-field> 
        <input type="text" [formControlName]="keyArray.key" matInput 
            [placeholder]="keyArray.name" 
            [ngClass]="{ 'is-invalid': submitted && updateForm.get(keyArray.key).errors }" 
            autocomplete="off" />
         <mat-error *ngIf="submitted && updateForm.get(keyArray.key).hasError('required')">
             {{keyArray.name}} is <strong>required</strong> 
         </mat-error>
     </mat-form-field>
</div>