Je travaille sur un projet angulaire en utilisant un formulaire réactif et en présentant FormArray (parce que j'ai une situation où un champ est créé de manière dynamique en tant que champs multiples), je suis confronté au problème suivant.

Fondamentalement, dans un formulaire défini mon code HTML, j'ai quelque chose comme ceci:

<div class="col-10">
    <ng-container *ngFor="let commessa of commessaList.controls; index as idx">
    <div class="row">
    <div class="col-sm-8">
      <input type="text" [ngClass]="{'error':commessa.invalid && commessa.touched}"
                 [formControlName]="idx"
                 class="form-control" id="commessa">
    </div>

    <div class="col-sm-2">
      <button type="button" *ngIf="idx===0" (click)="addCommessaField()" class="btn btn-success"
        [ngClass]="'pad'"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>

      <button (click)="deleteCommessaField(idx)" *ngIf="idx!==0" class="btn btn-danger">
        <i class="fa fa-trash" aria-hidden="true"></i>
      </button>
    </div>
    </div>
    </ng-container>

    </div>
</div>

Cette section est utilisée pour définir la section en surbrillance de mon formulaire (où je peux ajouter plusieurs champs "Commessa":

enter image description here

Ensuite, dans mon code TypeScript, j'ai défini l'objet orderForm: FormGroup; que j'utilise pour définir les champs de formulaire et les règles de validation associées, je l'ai défini dans ngOnInit () méthode:

ngOnInit() {

    this.orderFormValues = new OrderFormValues();

    console.log("orderFormValues VALUES: " + this.orderFormValues.statoOrdine);

    this.orderForm = this.fb.group({
    idOrdine: [null, [Validators.required]],
    dataInserimentoOrdine: [new Date(), [Validators.required]],
    statoOrdine: [null, [Validators.required, Validators.minLength(5)]],
    //commessa: [null, [Validators.required, Validators.minLength(5)]],
    commessaList: new FormArray([
    new FormControl('', [Validators.required, Validators.minLength(5)])
    ]),

    CIG: [null, [Validators.required, Validators.pattern("^[a-zA-Z0-9]{10}$")]],
    dataInizioAttivita: [null, [Validators.required]],
    dataFineAttivita: [null, [Validators.required]],
    referente: [null, [Validators.required]],
    ruoloReferente: [null, [Validators.required]],
    tipologiaDiPartecipazione: [null, [Validators.required, Validators.minLength(5)]],
    quotaPercentualeDiRTI: [null, [Validators.max(100)]],

    cliente: [null, [Validators.required]],
    vatCliente: [null, [Validators.required]],
    clienteFinale: [null, []],
    vatClienteFinale: [null, []],

    tipologiaContratto: [null, []],
    importoContratto: [null, [Validators.required]],
    linkContratto: [null, [Validators.required]],
    dataSottoscrizioneContratto: [null, [Validators.required]],

    nomeSocieta: [null, [Validators.required]],
    vatSocieta: [null, []],
    buName: [null, [Validators.required]],

    presenzaAQ: [false, [Validators.required]],
    linkIdentificativoAQ: [null, []],
    accordoQuadro: [null, []],
    residuoAccordoQuadro: [null, []],
    compagineDiAQ: [null, []]

    });



    this.ordersService.getAllOrders().then(orders => {
        this.orders = orders;
        console.log("RETRIEVED ORDERS: ", orders);
        this.loading = false;
    });

        .........................................................................................
        .........................................................................................
        .........................................................................................
}

Comme vous pouvez le voir dans la définition de FormGroup , la section relative au champ "Commessa" multiple est définie comme FormArray de cette manière:

commessaList: new FormArray([
    new FormControl('', [Validators.required, Validators.minLength(5)])
]),

Par souci d'exhaustivité, j'ajoute que dans mon code TypeScript j'ai également ces deux méthodes utilisées pour insérer la valeur insérée par l'utilisateur dans les multiples champs Commessa de cet objet FormArray :

addCommessaField() {
    this.commessaList.push(new FormControl('', [Validators.required, Validators.minLength(5)]));
}

deleteCommessaField(index: number) {
    if (this.commessaList.length !== 1) {
        this.commessaList.removeAt(index);
    }
    console.log(this.commessaList.length);
}

Comme vous pouvez le voir dans l'extrait de code précédent de ma méthode ngOnInit () , j'effectue également cet appel à un objet OrderService :

this.ordersService.getAllOrders().then(orders => {
    this.orders = orders;
    console.log("RETRIEVED ORDERS: ", orders);
    this.loading = false;
});

Cet appel récupère simplement une liste de commandes (pour le moment simulées dans un fichier JSON) qui sont affichées dans la page d'accueil et ici j'obtiens une erreur étrange.

Le code de ma méthode de service getAllOrders () est simplement celui-ci:

getAllOrders() {
    return this.http.get<any>('assets/json_mock/ordini.json')
    .toPromise()
    .then(res => <Order[]>res.data)
    .then(data => { return data; });
}

Comme vous pouvez le voir, il récupère et renvoie les commandes à partir de ce fichier ordini.json .

Le problème est qu'en appelant la méthode de service getAllOrders () , il récupère la liste des commandes, mais dans la console Chrome, j'obtiens également ce message d'erreur:

core.js:6228 ERROR Error: Cannot find control with name: '0'
    at _throwError (forms.js:3576)
    at setUpControl (forms.js:3398)
    at FormGroupDirective.addControl (forms.js:7679)
    at FormControlName._setUpControl (forms.js:8451)
    at FormControlName.ngOnChanges (forms.js:8368)
    at FormControlName.wrapOnChangesHook_inPreviousChangesStorage (core.js:26966)
    at callHook (core.js:4730)
    at callHooks (core.js:4690)
    at executeInitAndCheckHooks (core.js:4630)
    at selectIndexInternal (core.js:9748)

La chose étrange est que cela se produit après que j'ai implémenté ces multiples champs "Commessa" en utilisant le précédent FormArray (avant je n'avais qu'un seul champ de saisie "Commessa" et je n'avais pas cette erreur). Je soupçonne que l'erreur pourrait peut-être se trouver dans mon contenu JSON d'origine, mais je ne comprends pas pourquoi et comment je peux résoudre ce problème.

Suite au contenu de mon fichier ordini.json :

{
  "data": [
    {
      "id": 1,

      "referente": {
        "name": "Mario",
        "surname": "Rossi",
        "complete_name": "Mario Rossi",
        "role": "Operation Manager",
        "avatar": "mario-rossi.jpg"
      },

      "company": {
        "name": "TEST S.p.A.",
        "VAT": "IT 03318271214",

        "BU": {
          "name": "Digital Solution",
          "code": "DS"
        }
      },

      "dettaglio_ordine": {
        "data_inserimento": "08/08/2020",


        "commessa": {
          "code": "AAA0001"
        },

        "identificativo_contratto_hyperlink": "LINK-ID-CONTRATTO-TEST",
        "tipologia_contratto": "ORDINE",
        "presenza_AQ": true,
        "identificativo_AQ_hyperlink": "LINK-AQ-TEST",
        "accordo_quadro": 12,
        "importo_contratto": 122000,
        "residuo_AQ": 20000,
        "compagine_di_AQ": "COMPAGINE-DI-AQ-TEST",
        "quota_percentuale_di_RTI": 20,
        "tipologia_di_partecipazione": "GARA PUBBLICA",
        "cig": "CIG-TEST-1",
        "cliente": "CLIENTE-TEST-1",
        "vat_cliente": "VAT-CLIENTE",
        "cliente_finale": "CLIENTE-FINALE-TEST-1",
        "vat_cliente_finale": "VAT-CLIENTE-FINALE",
        "data_sottoscrizione_contratto": "8/12/2020",
        "data_inizio_attivita": "8/28/2020",
        "data_fine_attivita": "8/31/2020",
        "stato_ordine": "CHIUSO"
      }
    },

    {
      "id": 2,

      "referente": {
        "name": "Mario",
        "surname": "Rossi",
        "complete_name": "Mario Rossi",
        "role": "Operation Manager",
        "avatar": "mario-rossi.jpg"
      },

      "company": {
        "name": "Blabla S.p.A.",
        "VAT": "IT 03318271214",

        "BU": {
          "name": "Cyber Security",
          "code": "CS"
        }
      },

      "dettaglio_ordine": {
        "data_inserimento": "09/08/2020",


        "commessa": {
          "code": "AAA0002"
        },

        "identificativo_contratto_hyperlink": "LINK-ID-CONTRATTO-TEST",
        "tipologia_contratto": "ORDINE",
        "presenza_AQ": false,
        "identificativo_AQ_hyperlink": "LINK-AQ-TEST",
        "accordo_quadro": 12,
        "importo_contratto": 122000,
        "residuo_AQ": 20000,
        "compagine_di_AQ": "COMPAGINE-DI-AQ-TEST",
        "quota_percentuale_di_RTI": 20,
        "tipologia_di_partecipazione": "GARA PUBBLICA",
        "cig": "CIG-TEST-2",
        "cliente": "CLIENTE-TEST-1",
        "vat_cliente": "VAT CLIENTE TEST",
        "cliente_finale": "CLIENTE-FINALE-TEST-2",
        "vat_cliente_finale": "VAT-CLIENTE-FINALE-TEST",
        "data_sottoscrizione_contratto": "8/12/2020",
        "data_inizio_attivita": "8/28/2020",
        "data_fine_attivita": "8/31/2020",
        "stato_ordine": "CHIUSO"
      }
    },

    {
      "id": 3,

      "referente": {
        "name": "Francesco Nicola",
        "surname": "Romano",
        "complete_name": "Francesco Verdi",
        "role": "Operation Manager",
        "avatar": "francesco-romano.jpg"
      },

      "company": {
        "name": "Blabla S.p.A.",
        "VAT": "IT 03318271214",

        "BU": {
          "name": "Cyber Security",
          "code": "CS"
        }
      },

      "dettaglio_ordine": {
        "data_inserimento": "10/08/2020",


        "commessa": {
          "code": "AAA0002"
        },

        "identificativo_contratto_hyperlink": "LINK-ID-CONTRATTO-TEST",
        "tipologia_contratto": "ORDINE",
        "presenza_AQ": false,
        "identificativo_AQ_hyperlink": "LINK-AQ-TEST",
        "accordo_quadro": 12,
        "importo_contratto": 122000,
        "residuo_AQ": 20000,
        "compagine_di_AQ": "COMPAGINE-DI-AQ-TEST",
        "quota_percentuale_di_RTI": 20,
        "tipologia_di_partecipazione": "GARA PUBBLICA",
        "cig": "CIG-TEST-3",
        "cliente": "CLIENTE-TEST-3",
        "vat_cliente": "XXX123",
        "cliente_finale": "CLIENTE-FINALE-TEST-3",
        "vat_cliente_finale": "YYY321",
        "data_sottoscrizione_contratto": "8/12/2020",
        "data_inizio_attivita": "8/28/2020",
        "data_fine_attivita": "8/31/2020",
        "stato_ordine": "CHIUSO"
      }

    }
  ]
}

Comme vous pouvez le voir ici dans les objets définis dans ce fichier JSON, le champ commessa est défini de cette manière:

"commessa": {
    "code": "AAA0002"
},

Est peut-être faux ou peut-être que le problème est ailleurs

Qu'est-ce que je rate? Pourquoi est-ce que j'obtiens cette erreur? Comment puis-je essayer de corriger ce bogue?

-1
AndreaNobili 29 août 2020 à 13:10

2 réponses

Meilleure réponse

Il vous manque le div formArrayName en HTML.

Assurez-vous de joindre le HTML avec le < cycleformArrayName="commessaList"

<div formArrayName="commessaList">
  <div class="form-group row">
    <label for="commessa" class="col-sm-2 col-form-label">Commessa</label>
    <div class="col-sm-10">
      <ng-container *ngFor="let commessa of commessaList.controls; index as idx">
        ................
        ................
      </ng-container>
    </div>
  </div>
</div>
1
Janardhan Burle 29 août 2020 à 12:48

Vous avez oublié d'utiliser un getter?

get comessaList()
{
   return this.orderForm .get("comessaList") as FormArray
}

Pour éviter les erreurs initiales, vous pouvez utiliser un * ngIf

<div *ngIf="orderForm" [formGroup]="orderForm">
....
</div>
0
Eliseo 29 août 2020 à 12:36