FormArray 无法在我的反应式表单上打印答案

【问题标题】：FormArray does not print on my Reactive FormFormArray 无法在我的反应式表单上打印
【发布时间】：2020-04-15 20:55:22
【问题描述】：

我从 Angular 开始，我很难在我的表单中设置一个 FormArray。总之，我所做的是：

创建 2 个表单：主表单 (valForm) 和另一个动态创建的表单 (holidaysForm)。
将第二种形式的值复制到一个数组中。
将 Array 的值加载到 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"
}

有谁知道我可能做错了什么？谢天谢地，

【问题讨论】：

标签： arrays angular angular-reactive-forms react-final-form-arrays

【解决方案1】：

问题似乎是您在将值放入其中之前就使用了holidayForm。因此，在您创建要循环创建数组的对象时，该对象将没有属性。

 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); 添加一个 formArray

祝你好运，一如既往快乐编码

【讨论】：