Проблема с динамической формой с реактивной формой

Question

Я хочу создать динамическое поле ввода при нажатии кнопки и успешно могу создать новое поле ввода при нажатии кнопки с помощью реактивной формы, но теперь я хочу установить предварительно определенное значение в поле ввода в соответствии с данными API.Например, если из API, если я получаю 6 имен, я хочу создать эти 6 полей ввода в Init, а затем я хочу иметь возможность нового поля ввода при нажатии кнопки.Вот мой код, который я попробовал, я могу создать новое поле ввода, но не могу создать поля ввода в соответствии с данными API на Init.

Component.ts

export class ScreenmodalComponent implements OnInit {

  @Input() screendetails;
  personalForm : FormGroup;
  arrayItems: any = [];
  screenList: string;

  constructor(private activeModal: NgbActiveModal, private formbuilder: FormBuilder, private pagesService: PagesService, private utilService: UtilService) { }

  ngOnInit() {
    this.personalForm = this.formbuilder.group({
      other: this.formbuilder.array([ this.addanotherForm()])
    });
    // Api call
    this.pagesService.GetScreens('').then(res => {
      console.log('get screens api', res);
      for (let i = 0; i < res['data']['length']; i++) {
        this.arrayItems = res['data'][i]['name'] //names which I want to set as input field value and generate input fields for every name
      }
    }).catch(error => {
    this.utilService.showError('Something went wrong', 'Error');
    console.log('err is', error);
    });
  }


  addanother():void {
    (<FormArray>this.personalForm.get('other')).push(this.addanotherForm());
  }
  addanotherForm(): FormGroup{
 return this.formbuilder.group({
      screenname: [''],
    });
  }

clear(i : number){    
  (<FormArray>this.personalForm.get('other')).removeAt(i);
}

onSubmit(): void {

  console.log(this.personalForm.value);
}

closeModel() {
    this.activeModal.close();
  }
}

Код Componenent.html

<div class="custom_modal pb-3">
    <div class="modal-header border-0 p-1 pl-3 pr-3 d-flex justify-content-between align-items-center">
      <h3 class="m-0">Project: {{screendetails.name}}</h3>
      <button type="button" class="close" data-dismiss="modal" (click)="closeModel()">&times;</button>
    </div>

    <div class="modal-body p-3">
      <div class="body_top d-flex justify-content-between mb-4 mt-2 align-items-center">
        <h3 class="title m-0">Add Screens</h3>
      </div>
      <form [formGroup]="personalForm" (ngSubmit)="onSubmit()">
      <div formArrayName="other" class="form-group" *ngFor="let other of personalForm.get('other').controls; let i = index" >
        <div [formGroupName] = "i">
      <div class="screen_row mb-4">
        <div class="row">
          <div class="col-md-3 col-sm-3 d-flex align-items-center">
            <label>Screen Name</label>
          </div>
          <div class="col-md-8 col-sm-8 pl-0 pl-sm-3">
              <input type="text" class="form-control rounded-0" formControlName="screenname" name="screenname">
          </div>
          <div class="col-md-1 col-sm-1 d-flex align-items-center justify-content-center pl-0 pl-sm-3">
              <button type="button" class="close" (click)="clear(i)">&times;</button>
          </div>
        </div>
      </div>
    </div>
    </div>

    <div class="modal-footer border-0 d-table w-100">
        <button type="button" class="btn-primary float-left" (click)="addanother()">Add New Screen</button>
        <div class="float-right">
          <button type="button" class="btn-primary mr-3" data-dismiss="modal" (click)="onSubmit();">Apply</button>
          <button type="button" class="btn-primary cancle" data-dismiss="modal" (click)="closeModel()">Cancel</button>
        </div>
    </div>
  </form>
</div>
  </div>

Это мой код.Пожалуйста, помогите мне настроить поля ввода по умолчанию в соответствии с количеством имен в вызове API. Спасибо

Answer 1

Обычно вы меняете свою функцию addAnotherForm, чтобы разрешить передачу данных

addanotherForm(data:any): FormGroup{
 return this.formbuilder.group({
      screenname: [data],
    });
  }

В вашем случае вы должны изменить функцию addanother

addanother(data:any):void {
    (<FormArray>this.personalForm.get('other')).push(this.addanotherForm(data));
  }

Итак, ваш ngOnInit может быть как.

//at first an Empty FormArray
this.personalForm = this.formbuilder.group({
      other: this.formbuilder.array([])
    });
    // Api call
    this.pagesService.GetScreens('').then(res => {
      console.log('get screens api', res);
      for (let i = 0; i < res['data']['length']; i++) {
        this.arrayItems = res['data'][i]['name'] 
        this.addanother(res['data'][i]['name'] //fill the array
      }
    }).catch(error => {
    this.utilService.showError('Something went wrong', 'Error');
    console.log('err is', error);
    });

Ну, на самом деле вы можете просто весь код - и действительно вам это не нужно. ArrayItems - и мы используем карту

this.pagesService.GetScreens('').then(res => {
  this.personalForm=new FormGroup({
       other:new FormArray(
           res['data'].map(d>=>{
             return new FormGroup({
                screenname:new FormControl(d.name))
             })
           })
       )
  })
}).catch(error => {
    this.utilService.showError('Something went wrong', 'Error');
    console.log('err is', error);
});

ПРИМЕЧАНИЕ. Вам не нужно создавать ForGroup, если вы хотите, чтобы вы только управляли FormArray, а ваш FormArray может быть только formArray из formControls, а не FormArray из FormGroup