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