Problem with FormArray that contains a FormGroup

Question

Problem with FormArray that contains a FormGroup

Navigation

#1 by (0 votes)

1

Hello everyone I have a problem when inserting the data I pick up from a rest service, this service would be like this.

valor: Object =
{
nombre: "jose",
apellido: "campos",
direccion: {
  direccion: "calle de la mar",
  numero: "18"
},

contactos: [
  {
    numero: "123454444",
    tipo: "fijo"
  },
  {
    numero: "44455533",
    tipo: "fijo"
  }
]

}

I set up the form as follows.

   this.forma = new FormGroup({
  'nombre': new FormControl(''),
  'apellido': new FormControl(''),
  'direccion': new FormGroup({
    'direccion': new FormControl(''),
    'numero': new FormControl('')
     }),
    'contactos': new FormArray([
         new FormControl(''),
         new FormControl('')
               ]),

});

Here is where I show the FormArray "contacts" that has a formGroup inside

 <div formArrayName="contactos">
<div *ngFor="let item of forma.controls['contactos'].controls; let i=index" [formGroupName]="i">
  <div class="form-group row">
    <label class="col-2 col-form-label">Numero</label>
    <div class="col-lg-8">
      <input class="form-control" type="text" placeholder="Numero" formControlName="numero">
    </div>
  </div>

  <div class="form-group row">
    <label class="col-2 col-form-label">Tipo</label>
    <div class="col-lg-8">
      <input class="form-control" type="text" placeholder="Tipo" formControlName="tipo">
    </div>
  </div>
</div>

Everything loads well except "contacts", if I make a contact console.log or even if I submit, the data is loaded, but I can not get it reflected in the form input

Error: Cannot find control with path: 'contactos -> 0 -> numero'

This is the error that throws me, I infer that it is because it does not find the formControl "number" but I do not see where to put it because if I use

  'contactos': new FormArray([

        new FormGroup({
           'numero':  new FormControl(''),
             'tipo': new FormControl('')
        })
         ]),

I can not even upload the form, someone can give me a hand I've been several days and I can not see the solution.

angularjs-2.0

asked by jcampos 09.04.2017 в 18:02

source

1 answer

modal codeigniter Why does my table show the values in this way?

score 0 · Answer 1

I do not know what you are trying to do but I think you have complicated it a bit.

The error gives you because 'contacts' is not a Control of the variable "form". 'contacts' is a formArray as you defend in:

 this.forma = new FormGroup({
  'nombre': new FormControl(''),
  'apellido': new FormControl(''),
  'direccion': new FormGroup({
    'direccion': new FormControl(''),
    'numero': new FormControl('')
     }),
    'contactos': new **FormArray**([
         new FormControl(''),
         new FormControl('')
               ]),

Which means that you can not look for it in the HTML within the 'form' controls array:

<div *ngFor="let item of forma.controls['contactos'].controls;

What if you can search inside form.controls are the children of contacts if you gave a name:

'contactos': new **FormArray**([
         'fijo1': new FormControl(''),
         'fijo2' new FormControl('')
               ]),

Then you could reference them, like this:

 forma.controls['fijo1']

If you want to do it dynamically you have to make a new formGroup for contacts:

this.forma = new FormGroup({
  'nombre': new FormControl(''),
  'apellido': new FormControl(''),
  'direccion': new FormGroup({
    'direccion': new FormControl(''),
    'numero': new FormControl('')
     })}

this.formaContactos= new FormGroup
  ([
         'fijo1': new FormControl(''),
         'fijo2': new FormControl('')
               ]),

and in the HTML:

<div *ngFor="let item of formaContactos.controls ....