PROSAGA码农传奇-html/HTML5-使用fromGroup生成Angular动态formControlName

<div class =“post-text”itemprop =“text”>
  <P>
    补充我的评论，注意：你需要添加验证器（我在你的代码中看不到它们）
  </p>
   <pre>
    <code>
      this.updateForm=new FormGroup({}) //<--create the formGroup
for(let formModule of this.keyArray){
    this.updateForm.addcontrol(formModule.key,new FormControl(formModule.Value))
}

</code>
  </pre>
  <P>
    而且，如果我们在keyArray中的对象是这样的
  </p>
   <pre>
    <code>
      { "key" : "key_name" , 
   "value" : "value" , 
   "name" : "Key name" ,
   validators:[Validators.required, Validators.email]
}

</code>
  </pre>
  <P>
    我们可以改善循环
  </p>
   <pre>
    <code>
      for(let formModule of this.keyArray){
    this.updateForm.addcontrol(formModule.key,
          new FormControl(formModule.Value,formModule.validators))
}

</code>
  </pre>
  <P>
    好吧，如果我们的对象很难从我所展示的服务变得困难，但我们的服务可能会为我们提供如下对象：
  </p>
   <pre>
    <code>
      { "key" : "key_name" , 
   "value" : "value" , 
   "name" : "Key name" ,
   validators:[{type:"required"},{type="min",args:3}]
}

</code>
  </pre>
  <P>
    在进行循环之前我们可以使用
  </p>
   <pre>
    <code>
      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;
   }
}

</code>
  </pre>
  <P>
    要显示错误，我们必须考虑表单中的控件
  </p>
   <pre>
    <code>
      updateForm.get(keyArray.key)

</code>
  </pre>
  <P>
    所以，例如
  </p>
   <pre>
    <code>
      <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>

</code>
  </pre>
</DIV>