![](/img/trans.png)
[英]Angular 5 Reactive Forms - pass checkbox Id's for FormArray
[英]FormArray does not print on my Reactive Form
我從 Angular 開始,我很難在表單中設置 FormArray。 總之,我所做的是:
遵循以下代碼:
.ts
let group = {}
this.holidaysForm = new FormGroup(group);
this.valForm = fb.group({
dentistId: [null, Validators.required],
initialHour: [null, Validators.required],
endHour: [null, Validators.required],
numberOfHolidays: [null],
appointmentsInterval: [null, Validators.required],
year: [null, Validators.required],
workDays: this.buildDays(),
holidays: this.buildHolidays()
});
buildDays() {
const values = this.workDays.map(v => new FormControl(false));
return this.fb.array(values);
}
buildHolidays() {
if (typeof this.valForm !== 'undefined') {
let teste = Object.assign({}, this.holidaysForm.value);
this.holidays = new Array();
Object.values(teste).forEach((v) => {
this.holidays.push(v);
})
console.log(this.holidays);
const values = this.holidays.map((v)=> new FormControl(v));
return this.fb.array(values);
}
}
dynamicForm(val) {
if (val > 365) {
val = 365;
this.valForm.patchValue({
numberOfHolidays: 365
})
}
const val_plus_one = parseInt(val) + 1
let i: number = val_plus_one;
if (i < this.oldNumber) {
do {
this.holidaysForm.get('holiday' + i.toString()).setValue(null);
this.holidaysForm.removeControl('holiday' + i.toString());
i++
} while (i <= this.oldNumber)
}
const numbers = Array(val).fill(val, 0, 365).map((_, idx) => idx + 1)
numbers.forEach((num) => {
const fc = new FormControl('', FormValidations.Calendar(this.valForm.get('year').value));
this.holidaysForm.addControl('holiday' + num.toString(), fc)
})
this.numberOfHolidays = numbers;
this.oldNumber = val;
}
.html
<div class="col-md-4 mda-form-group">
<input class="mda-form-control" type="number" min="0" max="365"
formControlName="numberOfHolidays"
(change)="dynamicForm(valForm.get('numberOfHolidays').value)" />
<label>Total de Feriados</label>
</div>
<div [formGroup]="holidaysForm">
<div class="mda-form-group" *ngFor="let num of numberOfHolidays">
<input class="mda-form-control" type="date" formControlName="holiday{{num}}" />
<label>Feriado {{num}}</label>
<app-error-msg [control]="holidaysForm.get('holiday'+num)" label="Feriado">
</app-error-msg>
</div>
</div>
從理論上講,代碼運行良好且沒有錯誤,問題是結果總是這樣:
主表格
Valores:
{
"dentistId": null,
"initialHour": null,
"endHour": null,
"numberOfHolidays": 3,
"appointmentsInterval": null,
"year": null,
"workDays": [
false,
false,
false,
false,
false,
false,
false
],
"holidays": null
}
假期表格
{
"holiday1": "2020-01-01",
"holiday2": "2020-03-01",
"holiday3": "2020-02-01"
}
有誰知道我可能做錯了什么? 謝天謝地,
問題似乎是您在將值放入其中之前就使用了holidayForm。 因此,在您創建 object 以循環創建陣列時,object 將沒有任何屬性。
buildHolidays() {
if (typeof this.valForm !== 'undefined') {
let teste = Object.assign({}, this.holidaysForm.value); // this line
this.holidays = new Array();
Object.values(teste).forEach((v) => {
this.holidays.push(v);
})
console.log(this.holidays);
const values = this.holidays.map((v)=> new FormControl(v));
return this.fb.array(values);
}
}
我會弄清楚如何獲取在此方法中使用的值以使其全部正常工作。 請記住,您始終可以在創建原始表單組后通過group.addControl('controlName', myFormArray);
祝你好運,一如既往的快樂編碼
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.