web-dev-qa-db-fra.com

Ionic3/Angular Error: Doit fournir une valeur pour le contrôle de formulaire avec le nom: 'jobStatus'

J'ai un formulaire modal avec le code suivant dans le modèle de balisage

  <form [formGroup]="modalFG">
  ...
  <ion-item *ngIf="isChangeStatus()">
      <ion-select formControlName="jobStatus"
                  (ionChange)="jobStatusChangeHandler($event)">
        <ion-option value=4>Success</ion-option> 
        <ion-option value=5>Failure</ion-option>
        <ion-option value=6>Terminated</ion-option> 
        <ion-option value=8>Inactive</ion-option> 
      </ion-select>
  </ion-item>
  </form>

Dans le TypeScript, j'ai spécifié une valeur, mais je ne peux pas dépasser cette erreur.

Erreur: Le contrôle de formulaire doit fournir une valeur avec le nom: 'jobStatus'.

Quelqu'un peut-il me dire ce que je fais mal?

...
private modalFG:FormGroup;
private jobStatus:number;
constructor(
  private navParams:NavParams,
  private view:ViewController,
  private fb: FormBuilder,
  ...
) {
    this.changeStatus = false;
    this.modalFG = fb.group({
      comment: ['', Validators.required],
      jobStatus: this.jobStatus
    });
}
private ionViewWillLoad():void {
    const data = this.navParams.get('data');
    this.modalFG.setValue({'jobStatus': this.jobStatus});
}

private jobStatusChangeHandler(ev:any) {
    console.log(ev);
}

private isChangeStatus():boolean {
    return this.changeStatus;
}

J'ai aussi un gestionnaire de boutons pour soumettre avec ceci:

this.exitData.jobStatus = this.modalFG.get('jobStatus').value;
this.view.dismiss(this.exitData);

Ceci est le message d'erreur complet:

Error: Must supply a value for form control with name: 'jobStatus'.
    at http://localhost:8100/build/vendor.js:22102:23
    at http://localhost:8100/build/vendor.js:22026:66
    at Array.forEach (<anonymous>)
    at FormGroup._forEachChild (http://localhost:8100/build/vendor.js:22026:36)
    at FormGroup._checkAllValuesPresent (http://localhost:8100/build/vendor.js:22100:14)
    at FormGroup.setValue (http://localhost:8100/build/vendor.js:21907:14)
    at ModalPage.webpackJsonp.124.ModalPage.ionViewWillLoad (http://localhost:8100/build/main.js:648:22)
    at ModalImpl.ViewController._lifecycle (http://localhost:8100/build/vendor.js:17471:33)
    at ModalImpl.ViewController._willLoad (http://localhost:8100/build/vendor.js:17331:14)
    at OverlayPortal.NavControllerBase._willLoad (http://localhost:8100/build/vendor.js:44112:18)

Puisqu'on dit ionViewWillLoad dans la pile d'appels, l'erreur doit être quelque chose dans cette section autant que je sache!

angulartypescriptionic3angular-reactive-formsion-select
6
JGFMK

Oui .... Un formulaire qui n’avait auparavant qu’un seul contrôle de formulaire, appelé "commentaire".

Lorsque j'ai ajouté un deuxième élément de forme conditionnelle, la syntaxe nécessaire pour utiliser les modifications apportées à setValue ...

Je devais le modifier à partir de quelque chose comme ceci:

  this.modalFG.setValue({'comment': data.comment});
  this.modalFG.setValue({'jobStatus': 0});

à:

  this.modalFG.controls['jobStatus'].setValue(0);
  this.modalFG.controls['comment'].setValue(data.comment);

parce que j'avais maintenant deux champs sur le formulaire ...

Ensuite, tout s'est mis en place et le message trompeur selon lequel le champ de formulaire n'a pas été fourni a disparu. 

Je déteste la syntaxe de Angular ici, changer de comportement lorsque vous passez de 1 à n valeurs!

5
JGFMK

Mon problème était que je n'étais pas fournissant toutes les valeurs de contrôle de formulaire . Par exemple:

<div formGroupName="form">
    <input formControlName="first">
    <input formControlName="second">
</div>

Dans ce cas, si vous essayez d'utiliser la méthode setValue sans fournir toutes les valeurs de contrôle, comme ceci:

this.form.setValue({ second: "" });

ça va jeter une erreur.

Solution

Utilisez soit setValue et fournissez une valeur pour tous les contrôles de formulaire:

this.form.setValue({ first: "", second: "" });

ou, si vous avez vraiment l'intention de définir des valeurs partielles, utilisez la méthode patchValue:

this.form.patchValue({ second: "" });
5
Arthur Silva

Vous pouvez également utiliser patchValue pour simplement définir une ou plusieurs entrées individuellement:

this.form.patchValue({ first: "whatever" });
1
Terje Nesthus

Ici 

private jobStatus:number;

la valeur de jobStatus est 'undefined'.

Définir une valeur:

private jobStatus:number = 0;

pour le faire fonctionner.

0
Vega