Formulario de edición angular 2/4 Rellenar controles FormArray

Solución:

Algunos cambios en la respuesta de DeborahK, ya que expense.expense_expense_categories no contiene tipos primitivos, sino objetos. Por lo tanto, no podemos asignar los valores como están, pero cada objeto debe estar envuelto en un FormGroup, tal como lo ha intentado.

Aquí tengo una versión abreviada de su código:

Construye el formulario:

ngOnInit() {
  this.expenseEditForm = this.fb.group({
    notes: [''],
    // notice below change, we need to mark it as an formArray
    expense_expense_categories_attributes: this.fb.array([])
})

Entonces llamamos patchForm en la devolución de llamada, al igual que lo ha hecho usted. Esa función se vería así, observe, llamamos this.setExpenseCategories fuera de:

patchForm() {
  this.expenseEditForm.patchValue({
    notes: this.expense.notes,
  })
  this.setExpenseCategories()
}

Luego viene el cambio más grande de su código existente, donde primero asignamos el FormArray a la variable control y luego iteramos su matriz recibida del backend, creamos un FormGroup para cada objeto y empujar el objeto a cada FormGroup:

setExpenseCategories(){
  let control = <FormArray>this.expenseEditForm.controls.expense_expense_categories_attributes;
  this.expense.expense_expense_categories.forEach(x => {
    control.push(this.fb.group(x));
  })
}

Luego, a la plantilla, este ejemplo es sin material angular:

<form [formGroup]="expenseEditForm">
  <label>Notes: </label>
  <input formControlName="notes" /><br>
  <!-- Declare formArrayName -->
  <div formArrayName="expense_expense_categories_attributes">
    <!-- iterate formArray -->
    <div *ngFor="let d of expenseEditForm.get('expense_expense_categories_attributes').controls; let i=index"> 
      <!-- Use the index for each formGroup inside the formArray -->
      <div [formGroupName]="i">
      <label>Amount: </label>
        <input formControlName="amount" />
      </div>
    </div>
  </div>
</form>

Finalmente un

Manifestación

Si entiendo su pregunta correctamente, es posible que necesite algo como esto:

    // Update the data on the form
    this.productForm.patchValue({
        productName: this.product.productName,
        productCode: this.product.productCode,
        starRating: this.product.starRating,
        description: this.product.description
    });
    this.productForm.setControl('tags', this.fb.array(this.product.tags || []));

Puede ver el ejemplo completo aquí: https://github.com/DeborahK/Angular2-ReactiveForms en la carpeta APM – Actualizado.

---

---

Utiliza Nuestro Buscador