web-dev-qa-db-fra.com

Angular - Il n'y a pas de directive avec "exportAs" défini sur "ngModel"

Voici les fichiers du projet AngularJS. Comme suggéré dans certains messages, j'ai ajouté:

ngModel name="currentPassword" #currentPassword="ngModel

dans le champ de saisie, mais toujours avec une erreur.

package.json

.........
"dependencies": {
        "@angular/common": "^2.3.1",
        "@angular/compiler": "^2.3.1",
        "@angular/core": "^2.3.1",
        "@angular/forms": "^2.3.1",
        "@angular/http": "^2.3.1",
        "@angular/platform-browser": "^2.3.1",
        "@angular/platform-browser-dynamic": "^2.3.1",
        "@angular/router": "^3.3.1",
        "core-js": "^2.4.1",
        "rxjs": "^5.0.1",
        "ts-helpers": "^1.1.1",
        "zone.js": "^0.7.2"
    },
   ...............

change-password.component.html

<form #f="ngForm" [formGroup]="changePasswordForm">
        <div class="form-group">
            <label for="currentPassword">Current Password</label> <input
                placeholder="currentPassword" ngModel name="currentPassword"
                #currentPassword="ngModel" id="currentPassword"
                name="currentPassword" type="text" class="form-control" required
                minlength="6" formControlName="currentPassword">
            </div>
        </div>
        <button class="btn btn-primary" type="submit">Change Password</button>
    </form>

change-password.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, ControlContainer, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-change-password',
  templateUrl: './change-password.component.html',
  styleUrls: ['./change-password.component.css']
})
export class ChangePasswordComponent implements OnInit {

  changePasswordForm;

  constructor(formBuilder: FormBuilder) {
    this.changePasswordForm = formBuilder.group({
      currentPassword: new FormControl('', Validators.compose([Validators.required]))
    });
  }

  ngOnInit() {
  }

}

app.module.ts a imports

............
imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule
  ]
...........

Je reçois l'erreur suivante:

Rejet de la promesse non gérée: erreurs d'analyse du modèle: Il n'y a pas de directive avec "exportAs" défini sur "ngModel" ("Mot de passe urrent] # currentPassword =" ngModel "id =" currentPassword " Name =" currentPassword "type =" text "class =" form-co ") : ChangePasswordComponent @ 5: 4; Zone:; Tâche: Promise.then; Valeur: SyntaxError {__zone_symbol__error: Erreur: Erreurs d'analyse de modèle: Il n'y a pas de directive avec "exportAs" défini sur "ngModel" ("urrent Passwo ...… } Erreur: Erreurs d'analyse de modèle: Il n'y a pas de directive pour laquelle "exportAs" est défini sur "ngModel" ("Mot de passe urrent] # currentPassword =" ngModel "id =" currentPassword " Name =" currentPassword "type =" text "class =" form-co "): ChangePasswordComponent @ 5: 4 at SyntaxError.ZoneAwareError ( http: // localhost: 4200/polyfills.bundle.js: 6884: 33 ) SyntaxError.BaseError [en tant que constructeur] ( http: // localhost: 4200/vendor.bundle.js: 64475: 16 ) À la nouvelle SyntaxError ( http: // localhost: 4200/vendor.bundle .js: 5727: 16 )

angularangular2-formsangular2-ngmodel
6
Sarath

Vous utilisez un mélange étrange de formulaires basés sur des modèles et sur des modèles. Choisissez soit et ne mélangez pas ces deux. Voici donc un exemple du formulaire dirigé par modèle:

Inutile de définir required ou minlength dans le modèle, nous nous en occupons dans le composant. Nous n’avons pas non plus besoin de ngModel, name etc., puisque nous utilisons formControlName. Supprimez également #f="ngForm" car cela est lié au formulaire piloté par un modèle. Donc, votre modèle devrait ressembler à ceci:

<form [formGroup]="changePasswordForm">
  <label for="currentPassword">Current Password</label> 
  <input formControlName="currentPassword">
  <button type="submit">Change Password</button>
</form>

Et lors de la construction du formulaire, nous définissons tous les validateurs dont nous avons besoin, dans ce cas, required et minLength:

constructor(formBuilder: FormBuilder) {
  this.changePasswordForm = formBuilder.group({
    currentPassword: new FormControl('', 
          Validators.compose([Validators.required, Validators.minLength(6)]))
  });
}

Alors c'est tout! :)

Je vous suggère de lire sur les formulaires, voici le guide pour les formulaires basés sur des modèles et le guide pour les formulaires réactifs 

MODIFIER:

Pour la validation du formulaire, consultez la documentation officielle pour la validation du formulaire. Si vous avez beaucoup de champs, vous voudrez peut-être adapter leur solution, qui consiste à stocker toutes les erreurs de formulaire dans un objet séparé. 

Mais voici une solution de base pour vérifier les erreurs de formulaire pour chaque contrôle de formulaire. Donc ce qui suit serait pour vos validations:

<small *ngIf="changePasswordForm.get('currentPassword').hasError('required')">Required!</small>
<small *ngIf="changePasswordForm.get('currentPassword').hasError('minlength')">Minimum 6 chars</small>

Vous voudrez peut-être aussi afficher des messages d'erreur lorsque le champ est touché (??). C'est tout ce que vous pouvez trouver dans le lien que j'ai fourni pour validation :)

Mise à jour de la démonstration

7
AJT_82

Ajoutez import {FormsModule} à partir de '@ angular/forms'; Dans votre app.module.ts et dans le tableau d'importation, vous devez ajouter FormsModule.

La réponse est assez tardive, mais si quelqu'un est coincé dans le problème de l'angle 5, vous devez le faire.

4
Bharath R S

Cela pourrait aider quelqu'un dans Angular 6. 

J'ai oublié d'ajouter la directive ngModel à mon contrôle d'entrée, mais j'avais ajouté #currentPassword="ngModel" à mon formulaire. Les importations, etc. étaient toutes en place.

2
Abdul Rehman Sayed

si vous travaillez avec des formulaires basés sur des modèles angulaires et souhaitez utiliser #xname="ngModel", vous devez également utiliser la directive [(ngModel)]="mymodel" dans la même entrée et, bien sûr, importer de FormsModule dans votre app.module, comme indiqué dans les réponses ci-dessus

0
Chema