Как установить значения в виде массива, которые приходят с сервера? - PullRequest
0 голосов
/ 27 мая 2019

У меня есть форма, в которой поля выбора создаются динамически.Данные отправляются на сервер правильно, и я получаю его правильно.Проблема в том, что когда я пытаюсь присвоить значения селектов форме.

Я уже пробую что-то подобное this.form.value({b:"data",c:"data",d:"data",e:["data1","data2"],f:data});, но у меня это не работает.

const formArray =  new FormArray ([]);
     this.alert.newHourDayAlerts.forEach(element => {
       console.log(element);
       formArray.push( this.formBuilder.group({
         alertdoseHour: this.formBuilder.control('10:00')
       })
     )});



const formArrayTmp = new FormArray(
      this.alert.newHourDayAlerts.map((element) => {
        console.log(element)
        return this.formBuilder.group({
          alertdoseHour: '10:30'
        });

      })
    )

ТакПока это то, что я получаю в данный момент:

ngOnInit() {

    this.alertForm = this.formBuilder.group({
      title: ['', Validators.required],
      message: ['', Validators.required],
      alertRepeat: [false],
      medicine: [''],
      initDate: [''],
      finalDay: [''],
      medicAlert: [''],
      intervaleFreq: [''],
      duration: ['',],
      dosisDay: [0],
      dosisTotal: [''],
      dateAlert: ['', Validators.required],
      alertHour: ['', Validators.required],
      doseMedicineCheck: [false],
      titleDosisAlert:['', Validators.required],
      messageDosisAlert: ['',Validators.required],
      dosisHours: this.formBuilder.array([ {
        alertdoseHour: ['', Validators.required]}])

    });
}

this.alertForm.controls.doseMedicineCheck.valueChanges.subscribe(() => {

   if (this.dosisHours !== undefined) {

       const control = <FormArray>this.alertForm.controls['dosisHours'];

       while (control.length > 0) {

          control.removeAt(0)

       }

    }

    this.addHoursSelect(); 

})

this.alertForm.controls.dosisDay.valueChanges.subscribe(() => {

      if (this.dosisHours !== undefined) {

        const control = <FormArray>this.alertForm.controls['dosisHours'];

        while (control.length > 0) {

          control.removeAt(0)

        }

      }


      this.addHoursSelect();

    })

createHoursSelect(): FormGroup {

    return this.formBuilder.group({
      alertdoseHour: ['', Validators.required]
    })

  }



 addHoursSelect(): void {

    const numSelect = this.alertForm.controls.dosisDay.value;
    for (let i = 0; i < numSelect; i++) {
      this.dosisHours = this.alertForm.get('dosisHours') as FormArray;
      this.dosisHours.push(this.createHoursSelect())
    }

  }

this.alertForm.patchValue({

            title: this.alert.title,
            message: this.alert.message,
            medicine: this.alert.medicine,
            initDate: this.alert.initDate,
            finalDay: this.alert.finalDay,
            medicAlert: this.alert.medicAlert,
            duration: this.alert.duration,
            intervaleFreq: this.alert.intervaleFreq,
            dosisTotal: this.alert.dosisTotal,
            dosisDay: this.alert.dosisDay,
            dateAlert: this.datePipe.transform(this.alert.dateAlert, 'dd-mm-aaaa'),
            alertHour: this.alert.alertHour,
            doseMedicineCheck: this.alert.doseMedicineCheck,
            titleDosisAlert:this.alert.titleDosisAlert, 
            messageDosisAlert:this.alert.messageDosisAlert,

            })

this.alertForm.setControl('dosisHours', this.setExistingAlert());


setExistingAlert():FormArray {


    let control = <FormArray> this.alertForm.controls.dosisHours
    this.alert.newHourDayAlerts.forEach(element => {
      control.push(this.formBuilder.group({
        alertdoseHour: element.substr(0,5)
      }))
    });
    return control;
  }

Я не получаю никаких ошибок, но когда я возвращаю управление, массив не присваивается dosisHours

Пример HTML

<div class="col-md-12" *ngIf="this.alertForm.controls.doseMedicineCheck.value">
                  <div formArrayName="dosisHours" class="row">
                    <div class="form-group col-md-4"  *ngFor="let hour of alertForm.get('dosisHours').controls; let i = index">
                      <div [formGroupName] = "i">
                        <label translate>alertsPage.modal.hourDosis</label>
                        <select  formControlName="alertdoseHour" class="dosisForm">
                            <option *ngFor="let item of alertDosis" [value]="item">{{ item }}</option>
                          </select>
                      </div>
                    </div>
                  </div>
                </div>

this.alerForm = this.formBuilder.group({
      title: ['', Validators.required],
      dosisHours: this.formBuilder.array([ {
        alertdoseHour: ['', Validators.required]}])

    });

когда я пытаюсь получить данные с сервера и присвоить их форме, вот что я делаю: я получаю:

alert{
 title : "Test",
 newHourDayAlerts: ['10:00:00','11:00:00']
}

Чтобы назначить то, что я получаю:

this.alertForm.setControl('dosisHours', this.setExistingAlert());

setExistingAlert():FormArray {
let control = <FormArray> this.alertForm.controls.dosisHours
    this.alert.newHourDayAlerts.forEach(element => {
      control.push(this.formBuilder.group({
        alertdoseHour: element.substr(0,5)
      }))
    });
  return control;
  }
...