Nested dynamically created inputs, Form in Angular

Question

I'm trying to get the values inside the inputs of this form. There is a part where the inputs are generated every time that the user presses the button. However, after reading the documentation, I have not clear how should I do the .html in order to get the data properly.

component.html

<form [formGroup]="formulario">
<label>
    Capacidad
    <input type="text" formControlName="capacidad">
  </label>
  <label>
    Max. Casas
    <input type="text" formControlName="maxcasas">
  </label>
  <div formArrayName="pesos">
    Peso <button (click)="addPeso()">Añadir peso</button> 
    <div *ngFor="let peso of pesos.controls; let i=index">
      <label>
        Casa:
        <input type="text" [formGroupName]="i">
      </label>
      <label>
        Peso:
        <input type="text" [formGroupName]="i">
      </label>
    </div>
  </div>
</form>

component.ts (where fb is in constructor: constructor(private fb: FormBuilder)

public formulario = this.fb.group({
    capacidad: ['24300'],
    maxcasas: ['3'],
    pesos: this.fb.array([
      this.fb.group({
        peso:   this.fb.control(''),
        nombre: this.fb.control(''),
      })
    ])   
  });
  get pesos(){

    return this.formulario.get('pesos') as FormArray;
  }

  addPeso(){
    console.log(this.formulario.get('pesos'));
    this.pesos.push(this.fb.group([]));
  }

the html is not well formed. It is not accessing the inputs correctly. As well, I dont know how to get the input information. I have this.formulario.get('pesos') but that's an array, that has a group inside that has controls (the info I need) inside. I'm not sure how to access that information. — Germán
– Germán, Commented Jan 16, 2020 at 12:52

Chellappan வ · Accepted Answer · 2020-01-16 12:58:07Z

1

When creating nested form group, you have to use formGroupName directive as a parent of nested controls. Then if you want to access individual form group value use at method which is provide by FormArray API to get specific index value.

Try this:

component.html

<form [formGroup]="formulario">
<label>
    Capacidad
    <input type="text" formControlName="capacidad">
  </label>
  <label>
    Max. Casas
    <input type="text" formControlName="maxcasas">
  </label>
  <div formArrayName="pesos">
    Peso <button (click)="addPeso()">Añadir peso</button> 
    <div *ngFor="let peso of pesos.controls; let i=index"  [formGroupName]="i">
      <label>
        Casa:
        <input type="text" formControlName="peso">
      </label>
      <label>
        Peso:
        <input type="text" formControlName="nombre">
      </label>
    </div>
  </div>
</form>

component.ts

this.formulario.get('pesos').at(0).value

Example

answered Jan 16, 2020 at 12:58

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Germán Over a year ago

Thanks, this goes in the right way, however I get a compile error where you put .at(0), Property 'at' does not exist on type 'AbstractControl'. Is there any other more "angular" way to approach this value?

Germán Over a year ago

Tried to, but not working, IDK why. stackblitz.com/edit/angular-zkbfch

Chellappan வ Over a year ago

Inside addPeso method why are you adding empty group?

Germán Over a year ago

I was trying different ways to make it work, this is one of them, no success.

Chellappan வ Over a year ago

Try this:: addPeso(){ console.log(this.formulario.get('pesos').at(0).value); this.pesos.push(this.fb.group({ peso: this.fb.control(''), nombre: this.fb.control(''), })); }

|

Collectives™ on Stack Overflow

Nested dynamically created inputs, Form in Angular

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related