Eckig - Es gibt keine Richtlinie, die mit "exportAs" "ngModel"

Folgenden werden die Dateien in der AngularJS-Projekt. Wie bereits in einigen posts, die ich Hinzugefügt haben:

ngModel name="currentPassword" #currentPassword="ngModel

in das input-Feld, aber immer noch ein Fehler.

Paket.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>

ändern-Passwort.Komponente.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.- Modul.ts hat die Importe

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

Ich erhalte die folgende Fehlermeldung:

Unbehandelte Versprechen Ablehnung: Template-parsing-Fehler:
Es gibt keine Richtlinie, die mit "exportAs" "ngModel" ("urrent Kennwort ]#currentPassword="ngModel" id="currentPassword"
name="currentPassword" type="text" class="form co"): ChangePasswordComponent@5:4 ; Zone: ; Aufgabe: Versprechen.dann ; Wert: SyntaxError {__zone_symbol__Fehler: Fehler: Template-parsing-Fehler:
Es gibt keine Richtlinie, die mit "exportAs" "ngModel" ("urrent Passwo......} Fehler: Template-parsing-Fehler:
Es gibt keine Richtlinie, die mit "exportAs" "ngModel" ("urrent Kennwort ]#currentPassword="ngModel" id="currentPassword"
name="currentPassword" type="text" class="form co"): ChangePasswordComponent@5:4
bei SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:6884:33)
bei SyntaxError.BaseError [Konstruktor] (http://localhost:4200/vendor.bundle.js:64475:16)
an der new SyntaxError (http://localhost:4200/vendor.bundle.js:5727:16)

InformationsquelleAutor Sarath | 2017-05-22

  1. 9

    Verwenden Sie eine seltsame Mischung von template-driven und model-driven form. Wählen Sie entweder und keinen mix aus beiden. So, hier ist die Probe auf die Modell-getriebene form:

    Muss keine required oder minlength in der Vorlage, die wir behandeln thid in der Komponente. Auch brauchen wir keine ngModel, name etc, da wir formControlName. Entfernen Sie auch #f="ngForm" als im Zusammenhang mit der Vorlage-driven form. Damit Ihre Vorlage sollte wie folgt Aussehen:

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

    Und bei der Erstellung des Formulars, setzen wir alle Prüfungen, die wir brauchen, in diesem Fall required und minLength:

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

    So, dass ist es! 🙂

    Ich schlage vor, Sie Lesen über die Form, hier ist die Anleitung für Vorlagen Formulare und Leitfaden für reaktive Formen

    EDIT:

    Für Formular-Validierung, überprüfen Sie die offiziellen docs für Formular-Validierung. Wenn Sie viele Felder, möchten Sie vielleicht, um die Anpassung Ihrer Lösung, wo die Speicherung aller form Fehler in einem separaten Objekt.

    Aber hier ist eine einfache Lösung um zu überprüfen, für den form-Fehler für jedes Formular-Steuerelement. So wäre das folgende für Ihren Validierungen:

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

    Möchten Sie vielleicht auch, um zu zeigen, vielleicht Fehlermeldungen, wenn das Feld berührt (??). Dies alles finden Sie in der link, den ich zur Verfügung gestellt für die Validierung 🙂

    Updated Demo

    Vielen Dank für die Antwort. Wie erstelle ich eine lokale variable auf das Eingabefeld, um die form-überprüfungs-Fehlern (nicht mit #f)? Dies ist für die Anzeige der Fehlermeldung innerhalb eines span/div.
    Ich Frage bearbeitet und aktualisiert plunker. Bitte prüfen Sie auch die links, die ich zur Verfügung gestellt für mehr Informationen! 🙂
    Der link "das Handbuch für die Formulare" ist gebrochen
    Danke @reggaeguitar für die info 🙂 es Behoben.

    InformationsquelleAutor AJT_82

  2. 5

    Hinzufügen import { FormsModule } '@eckig/Formen'; app.- Modul.ts und im import-array müssen Sie FormsModule.

    Ist die Antwort ziemlich spät, aber wenn es jemand ist, hängt mit dem Problem in Winkel-5, die Sie brauchen, um dies zu tun.

    Ich wünschte, es kam früher, das ist eigentlich die Antwort
    In der Frage, können wir sehen, OP hat das Modul importiert die app-Modul. Das ist nicht das Problem in dieser Frage.

    InformationsquelleAutor Bharath R S

  3. 2

    Dies könnte helfen, jemand in Eckige 6.

    Habe ich vergessen hinzufügen ngModel Richtlinie, um meine input-regler, aber Hinzugefügt hatte #currentPassword="ngModel" zu meiner form. Die Importe etc waren alle an Ort und Stelle.

    InformationsquelleAutor Abdul Rehman Sayed

  4. 0

    wenn Sie die Arbeit mit Winkel-template-driven Formen und nutzen wollen #xname="ngModel" Sie auch verwenden müssen [(ngModel)]="mymodel" Richtlinie in den gleichen Eingang, und, natürlich, import de FormsModule zu Ihrem app.module, wie gesagt, in anderen Antworten oben

    InformationsquelleAutor Chema

Schreibe einen Kommentar