2017-04-07 4 views
2

Ich folgte dem eckigen 2-Tutorial und versuchte die Validierung in einer eckigen 2-Form zu implementieren. Siehe Code:eckig 2 Formularvalidierung mit undefinierter Fehlermeldung

<form #loginForm="ngForm" (ngSubmit)="login()"> 
    <div> 
     <label for="email">Email:</label> 
     <input type="text" id="email" name="email" required minlength="4" maxlength="24" [(ngModel)]="emailField" #name="ngModel" /> 
     <div *ngIf="email?.errors && (email?.dirty || email?.touched)" class="alert alert-danger"> 
      <div [hidden]="!email.errors.required"> 
       email is required 
      </div> 
      <div [hidden]="!email.errors.minlength"> 
       email must be at least 4 characters long. 
      </div> 
      <div [hidden]="!email.errors.maxlength"> 
       Name cannot be more than 24 characters long. 
      </div> 
     </div> 
    </div> 
    <div> 
     <label>Password:</label><input type="password" name="password" [(ngModel)]="passwordField" /> 
    </div> 
    <div> 
     <button [disabled]="!loginForm.form.valid" type="submit">Submit</button> 
    </div> 
</form> 

Das Problem ist, dass ich diesen Fehler bin immer:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'errors' of undefined 

Ich versuchte es genau auf der offiziellen Seite, wie in der Anleitung zu implementieren: https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#template1

+3

ändere '# name =" ngModel "' in '# email =" ngModel "' –

+1

Danke George, das war's. Setzen Sie eine Antwort, damit ich Sie upvotieren und als richtige Antwort markieren kann. – ionescho

+1

Keine Notwendigkeit zu. Ich bin froh, dass der Kommentar geholfen hat –

Antwort

2

Die Antwort (Danke an George K) war, dass ich versehentlich #name="ngModel" anstelle von #email="ngModel"