установить json значения в реактивных формах, используя angular 8

Question

если у меня есть json длина два, то будет создан этот вид двух строк. так что в идеале l oop будет работать два раза. У меня есть json данные, которые я получаю через сервисный вызов в следующем формате:

{"data":[{"id":1,"level1Id":1,"level2Id":1,"level3Id":1,"level4Id":1},{"id":2,"level1Id":2,"level2Id":4,"level4Id":2}

Теперь я должен установить эти данные в поле ввода реактивных форм. код которого приведен ниже:

<div class="input-group-prepend"  *ngFor="let ldata of level5data" >                                                                             
  <input type="text" formControlName="level1id" value="{{ldata.level1Id}}"  />
  <input type="text" formControlName="level2id" value="{{ldata.level2Id}}"/>
  <input type="text" formControlName="level3id" value="{{ldata.level3Id}}"/>
  <input type="text" formControlName="level4id" value="{{ldata.level4Id}}"/>
  <input type="text" formControlName="level5id" value="{{ldata.id}}"/>
</div>

Теперь проблема в том, что я могу видеть значение соответствующих полей, но при отправке формы я получаю нулевое значение для того же. Я новичок ie до angular, пожалуйста, помогите мне получить это значение при отправке формы

Это мой код TS:

 private getLevelList() {
    const formData = new FormData(); 
    formData.append('projectId',"1"); 
    this.level5Service.getLevel5Details(formData).subscribe(
     responsedata=>{      
      this.level5data= responsedata['data'];
      //console.log(this.level5data);
  this will generate the following JSON:
  {"data":[{"id":1,"level1Id":1,"level2Id":1,"level3Id":1,"level4Id":1}, 
 {"id":2,"level1Id":2,"level2Id":4,"level4Id":2}

  here i need to set values to input boxes (refer to image)
      this.temp = true;     
      },err=>{
        console.error(err);
      }

    )
  }

Answer 1

Значение отображается в полях ввода, потому что вы устанавливаете его для атрибута value, но вы не можете получить его, поскольку оно не установлено в элементе управления Реактивная форма.

Вам необходимо FormArray для использования. Создайте форму, подобную этой:

ngOnInit() {
  this.myForm = this.formBuilder.group({
    field1: '',
    levels: this.formBuilder.array([ this.createLevel() ])
  });
}

L oop через ваши данные и вызовите функцию addLevel() для каждого.

addLevel(): void {
  this.levels = this.myForm.get('levels') as FormArray;
  this.levels.push(this.createLevel());
}
createLevel(): FormGroup {
  return this.formBuilder.group({
    level: ''
  });
}

И ваш HTML будет:

<div formArrayName="levels"
  *ngFor="let level of myForm.get('levels').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="level" placeholder="Level">
  </div>
</div>

И l oop еще раз для получения данных:

this.myForm.get('levels').controls

Выше приведены элементы управления, и вы получаете значение каждого элемента управления с помощью .value.

Обновление

Если у вас 5 статических входов / всегда, используйте следующее:

this.myForm.patchValue( 
  {level1id:ldata.level1Id},
  {level2id:ldata.level2Id},
  {level3id:ldata.level3Id},
  {level4id:ldata.level4Id},
  {level5id:ldata.leve15Id}
);