0

Estoy intentando hacer un reactive form en Angular 6 pero al hacer la relación en el HTML obtengo el error Cannot find control with path:

Así es como se inicializa el form, agregando un group a un array por cada objeto que tengo en un array.

this.formReviewSingle = this.formBuilder.group({
        delivery:this.formBuilder.array([])
    })

this.teamSelected.integrantes.forEach(student => {
        (<FormArray>this.formReviewSingle.get('delivery')).push(
            this.formBuilder.group({
                realimentacion: new FormControl('student.nombreCompleto'),
                calificacion: new FormControl(0)
            })
        )
    })

y así lo uso en html

<form [formGroup]="formReviewSingle">
            <div formArrayName="delivery">
                <div class="row col-md-12"
                    *ngFor="let members of formReviewSingle.get('delivery').controls; index as i">
                    <div class="col-xl-3 col-md-3" [formGroupName]="0">
                        <div class="card g-rounder-6">
                            <div class="media">
                                <div class="mr-3">
                                    <a>
                                        <img class="rounded-circle g-bg-black" style="height: 42px; width: 42px;"
                                            [src]="'REPOSITORY' + teamSelected.integrantes[i].ruta">
                                    </a>
                                </div>
                                <div class="media-body g-cursor-pointer">
                                    <h6 class="mb-0 g-font-size g-font-weight-500">
                                        {{teamSelected.integrantes[i].nombreCompleto}}
                                    </h6>
                                    <span
                                        class="text-muted text-lowercase g-font-size-12 font-weight-400">{{teamSelected.integrantes[i].idUsuario}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <textarea type="text" id="{{i}}" class="form-control" style="width: 100%; height: 81%;"
                            formControlName="realimentacion" name="realimentacion"></textarea>
                    </div>
                    <div class="col-md-2" style="display: flex; margin-bottom: 18px;">
                        <input type="text" class="form-control" style="width: 50%; height: 60%;" name="calificacion"
                            (input)="roundNumber($event.target, 1000)" formControlName="calificacion"><span
                            class="g-font-size-12 total-points-activity-teams"> de 1000 pts</span>
                    </div>
                </div>
            </div>
        </form>

y obtengo este error: Cannot find control with path: 'delivery -> calificacion'. Creo que el formGroupName no está funcionando porque no lo toma en cuenta.

2 respuestas 2

1

Cambia el [formControName]="0" por: [formControName]="i" Angular necesita identificar cada grupo de formularios dentro del array.

Luego, es posible que el atributo name esté afectando, yo lo eliminaría de los subformularios:

<div class="col-md-7">
  <textarea
    type="text"
    id="{{i}}"
    class="form-control"
    style="width: 100%; height: 81%;"
    formControlName="realimentacion"
  ></textarea>
</div>
<div class="col-md-2" style="display: flex; margin-bottom: 18px;">
  <input
    type="text"
    class="form-control"
    style="width: 50%; height: 60%;"
    (input)="roundNumber($event.target, 1000)"
    formControlName="calificacion"
  /><span class="g-font-size-12 total-points-activity-teams"> de 1000 pts</span>
</div>

Por último, el id="{{i}}" se ve algo extraño, quizás sea mejor sustituirlo por id="realimentacion_{{i}}" por ejemplo.

Tienes un ejemplo de un caso algo más complejo pero similar al tuyo (en inglés) aquí: https://medium.com/hashtaagco/3-levels-of-nested-form-arrays-including-reactive-validations-we-decided-to-go-inception-mode-on-4fffe667fb2a

0

Con el index en el formGroupName en un div padre debería ser suficiente, sin necesidad de quitar el name en los inputs.

<form [formGroup]="formReviewSingle">
  <div formArrayName="delivery">
    <div
    class="row col-md-12"
    *ngFor="let members of formReviewSingle.get('delivery').controls; index 
     as i"
    >
  <div class="col-xl-3 col-md-3" [formGroupName]="i">
    <div class="card g-rounder-6">
      <div class="media">
        <div class="mr-3">
          <a>
            <img
              class="rounded-circle g-bg-black"
              style="height: 42px; width: 42px"
              [src]="'REPOSITORY' + teamSelected.integrantes[i].ruta"
            />
          </a>
        </div>
        <div class="media-body g-cursor-pointer">
          <h6 class="mb-0 g-font-size g-font-weight-500">
            {{teamSelected.integrantes[i].nombreCompleto}}
          </h6>
          <span
            class="text-muted text-lowercase g-font-size-12 font-weight-400"
            >{{teamSelected.integrantes[i].idUsuario}}</span
          >
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-7">
    <textarea
      type="text"
      id="{{i}}"
      class="form-control"
      style="width: 100%; height: 81%"
      formControlName="realimentacion"
      name="realimentacion"
    ></textarea>
  </div>
  <div class="col-md-2" style="display: flex; margin-bottom: 18px">
    <input
      type="text"
      class="form-control"
      style="width: 50%; height: 60%"
      name="calificacion"
      (input)="roundNumber($event.target, 1000)"
      formControlName="calificacion"
    /><span class="g-font-size-12 total-points-activity-teams">
      de 1000 pts</span
    >
  </div>
 </div>
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.