Угловая динамическая форма formControlName генерируется с помощью fromGroup

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 будет меняться много раз.Нет проблем в создании модулей пользовательского интерфейса, но когда я пытаюсь применить валидацию и формировать модули к этому динамически генерируемому содержимому, весь поток падает,

, это мой код

var jsonArray : any = [{}];

export class UpdateContactFieldDialog {

  matcher = new MyErrorStateMatcher();

  updateForm: FormGroup;

  formString : string = null;
  ELEMENT_DATA_UPDATE : any[] = [];
  keyArray : any[] = [];

  myJobFunctionControl = new FormControl();
    optionsJobFunction: string[] = ['Operations', 'Production', 'Manufacturing'];

  myTitleControl = new FormControl();
    optionsTitle: string[] = ['HR', 'Developer', 'Tester', 'MD', 'CEO', 'Director'];



  constructor(private formBuilder: FormBuilder,private dialogRef: MatDialogRef<AddContactFieldDialog> ) { 

  }

  ngOnInit() {


    //dumy randomly geneated fields
    this.ELEMENT_DATA_UPDATE = [
      {
            first_name : 'abc',
            last_name : 'xyz',
            job_function : 'Production',
            title : 'Developer',
            email : 'abc@abx.com',
            phone : 7945612304
      }
    ];

    for (let obj of this.ELEMENT_DATA_UPDATE) {

        console.log("object length:", this.ELEMENT_DATA_UPDATE.length);
        for (let key in obj) {
            this.keyArray.push({'key' : key , 'value' : obj[key] , 'name': (key.charAt(0).toUpperCase() + key.substr(1).toLowerCase()).replace(/_/g, ' ')});
        }
        break;
    }
    console.log(this.keyArray);
    console.log(this.ELEMENT_DATA_UPDATE[0]);


      for(let formModule of this.keyArray){
       var keyData = formModule.key;
       
        if(this.formString != null && keyData == 'email' || keyData.includes('mail')){
            this.formString = this.formString +''+keyData+':[this.ELEMENT_DATA_UPDATE[0].'+keyData +',[Validators.required,Validators.email]], ';  
        }
        else
          if(this.formString != null && keyData == 'phone' || keyData.includes('number')  || keyData.includes('no') || keyData.includes('num')  ){
            this.formString = this.formString +''+keyData+':[this.ELEMENT_DATA_UPDATE[0].'+keyData +',[Validators.required,Validators.minLength(10),Validators.maxLength(10),Validators.pattern("[0-9]*")]], ';  
        }
        else
        if(this.formString == null && keyData != 'email' && keyData != 'phone'){
          this.formString = ''+keyData+':[this.ELEMENT_DATA_UPDATE[0].'+keyData +',Validators.required], '; 
        }
        else{
            this.formString = this.formString + ''+keyData+':[this.ELEMENT_DATA_UPDATE[0].'+keyData +',Validators.required], ';  
        }

      }
      console.log(this.formString);

        jsonArray = (this.formString);
    this.updateForm = this.formBuilder.group(jsonArray);
         
  }

  // convenience getter for easy access to form fields
  get f() { return this.updateForm.controls; }

  submitContact() {
      this.submitted = true;

      // stop here if form is invalid
      if (this.updateForm.valid) {
        // alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.updateForm.value))
        console.log(this.updateForm.value);
        this.dialogRef.close();
      }
      else{
        return;      
      }
  }

}

Мой код генерирует следующий код как String

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>