2017-05-16 5 views
0

Ich versuche, meine Daten für ein Student-Objekt mit Angular Form Validation zu validieren, aber wenn ich zum Beispiel die Seriennummer eines Studenten verwenden oder drucken möchte, gibt es mir diesen Fehler: Kann nicht Lese Eigenschaft 'serialNumber' von undefined. Hier ist der Code:Angular Form Validierung Fehler: Formular ist undefined

<div *ngIf="student"> 
 
    <div class=container> 
 
    <h2>Student {{student.name}} details</h2> 
 
    <form name="studentForm" (ngSubmit)="save()"> 
 
     <!--<div ng-class="{ 'has-error' : studentForm.serialNumber.$invalid && !studentForm.serialNumber.t">--> 
 

 
     <label>Serial number: {{student.serialNumber}} </label> 
 
     <input type="text" name="serialNumber" class="form-control" ng-model="student.serialNumber" required> 
 

 
     <div ng-messages="studentForm.serialNumber.$error"> 
 
      {{studentForm.serialNumber}} 
 
      <p ng-message="required">Your name is required!</p> 
 
     </div> 
 
     <!--</div>--> 
 
     <div> 
 
     <label>Name: {{student.name}}</label> 
 
     <input ng-model="student.name" placeholder="name"> 
 
     </div> 
 
     <div> 
 
     <label>Group number: {{student.groupNumber}}</label> 
 
     <input ng-model="student.groupNumber" placeholder="groupNumber"> 
 
     </div> 
 

 
     <button (click)="goBack()">Back</button> 
 
     <button (click)="save()">Save</button> 
 
    </form> 
 
    </div> 
 
</div>

+0

Dies ist nicht gültig. Winkelcode - das ist dein Problem. Sehen Sie sich ReactiveForms an und verwenden Sie FormBuilder, um Ihre 'studentForm' in Ihrer TS-Logik zu definieren. –

+0

Überprüfen Sie [** this **] (http://stackoverflow.com/q/42157675/4911842). Es kann für Sie nützlich sein. – developer033

Antwort

0

Die ng-messages und ng-model Attribut Richtlinien existieren nicht in Angular 2+. Ich würde empfehlen, in Angular Forms, ReactiveForms und Template Syntax zu lesen.

Wenn Sie die Eingabewerte dual Daten binden möchten, können Sie dies mit der folgenden Syntax tun: [(ngModel)]="student.serialNumber". In Angular 2+ gibt es jedoch normalerweise bessere Möglichkeiten, andere Werte als explizit Datenbindung zu erhalten.

Verwandte Themen