Angular 6 mise en garde pour l'utilisation de formControlName et ngModel

Question

J'ai récemment mis à niveau la version d'Angular en 6-rc. J'ai reçu l'avertissement suivant

Il semblerait que vous utilisiez ngModel sur le même champ de formulaire que formControlName. Le support de l'utilisation de la propriété d'entrée ngModel et de l'événement ngModelChange avec les directives de formulaire réactif a été déprécié dans Angular v6 et sera supprimé dans Angular v7

Pour plus d'informations à ce sujet, consultez notre documentation API ici : https://angular.io/api/forms/FormControlName#use-with-ngmodel

Que dit exactement le message ? Le lien ne contient aucun fragment pour #use-with-ngmodel

J'imagine que je dois supprimer ngModel et utiliser formGroup comme objet de liaison de mes données.

Answer 1

Maintenant, vous pouvez trouver la documentation ici :

https://angular.io/api/forms/FormControlName#use-with-ngmodel-is-deprecated

Donc vous avez 3 options :

1. utiliser des formulaires réactifs

2. utiliser des formulaires pilotés par template

3. ignorer l'avertissement (non recommandé)

   imports: [
     ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
   ]

Answer 2

Supprimez [(ngModel)] de chaque champ dans formGroup contient formControlName et définissez la valeur dans la classe du contrôleur comme suit simplement ce.form.get('first').setValue('une valeur'); ne fermez pas ou ne supprimez pas les avertissements explicitement

Answer 3

Ajouter

[ngModelOptions]="{standalone: true}" 

Vous pouvez en savoir plus sur le site web angular https://angular.io/api/forms/NgModel

Answer 4

Donc, je suis tombé sur cela en essayant d'afficher les avatars des utilisateurs dans mat-select:

    @{{assignedToFormGroup.controls['assignTo'].value.userName}}

    @{{user.userName}}

Dans le contrôleur, le formGroup était défini de cette manière:

public assignedToFormGroup: FormGroup;

J'ai suivi les conseils de Sohail et j'ai supprimé [(ngModel)] de mon code HTML:

    @{{assignedToFormGroup.controls['assignTo'].value.userName}}

    @{{user.userName}}

Cela m'a donné des erreurs lors de l'ouverture de la page - j'ai essayé de charger photoUrl et userName depuis null, car en enlevant [(ngModel)] j'ai aussi supprimé la sélection par défaut dans mat-select.

Alors j'ai modifié mon contrôleur pour faire ce qui suit: 1. Constructeur:

this.assignedToFormGroup.controls['assignTo'].setValue({photoUrl: '', userName: ''});

2. Action du bouton où je sauvegarde mon formulaire - ajout de la ligne suivante:

   let assignedTo = this.assignedToFormGroup.controls['assignTo'].value;

Cela a effectivement fonctionné. Maintenant, je définis une sélection par défaut lors du chargement de la page et je lis la valeur sélectionnée lors de la soumission du formulaire. Je suis conscient que ce n'est pas la meilleure ni la plus jolie solution, mais je me suis dit que je la partagerais - cela pourrait être un bon point de départ pour une meilleure solution.

Answer 5

Utiliser formControl (reactive Forms) est plus simple couplé avec Rxjs alors l'équipe Angular a changé son utilisation.

Changer sur le fichier html

à

[formControl]="myControl"

Changer sur le fichier ts

model: string;
  modelChanged: Subject = new Subject();

  changed(text: string) {
      this.modelChanged.next(text);
  }
  this.modelChanged.pipe(
      .subscribe(model => this.postErrorMessage = model);

à

this.myControl.valueChanges.pipe(
      .subscribe(model => this.postErrorMessage = model);