Angular2: Form Eingang haben keine gültige Eigenschaft

Question

ich dieses:

<form (ngSubmit)="Signup()" name="signup"> 
    <input type="text" autocomplete="off" placeholder="Username" required [(ngModel)]="name" name="name"> 
    <label> 
     @{{ name.valid }} 
    </label> 
    <br> 
    <input type="password" autocomplete="off" name="password" placeholder="Password" required> 
    <br> 
    <button type="submit">Submit</button> 
</form> 

P. S: I @ verwenden, weil ich Laravel mit Klinge verwenden. Wenn ich @ {{Name}} verwende, funktioniert es !!

Und ich kann nicht sehen, ob Bereichsname gültig ist oder nicht, wenn ich name.valid gesetzt oder signup.name.valid ich diese:

platform-browser.umd.js:1900 ORIGINAL EXCEPTION: TypeError: Cannot read property 'name' of undefined

oder

platform-browser.umd.js:1900 ORIGINAL EXCEPTION: TypeError: Cannot read property 'valid' of undefined

On angular1 es war so einfach .. jetzt ist komplizierter .. Ich mache direkt auf der angular2 Seite und habe immer noch Fehler .. lol.

Answer 1

Nach neuer Form API, ngModel mit Kontrolle des Status arbeitet über ngForm Richtlinie, die in Ihrem Fall fehlen.

The NgForm directive

What NgForm directive? We didn't add an NgForm directive!

Angular did. Angular creates and attaches an NgForm directive to the tag automatically.

The NgForm directive supplements the form element with additional features. It holds the controls we created for the elements with ngModel directive and name attribute and monitors their properties including their validity. It also has its own valid property which is true only if every contained control is valid.

<form (ngSubmit)="Signup()" #singupForm="ngForm">     //<----- changed it 


    <input type="text" autocomplete="off" placeholder="Username" 
      required [(ngModel)]="name" name="name" #name="ngModel"> //<----- changed it 

    <label> 
     @{{ name.valid }} 
    </label> 
    <br> 
    <input type="password" autocomplete="off" name="password" placeholder="Password" required> 
    <br> 
    <button type="submit">Submit</button> 

</form> 

Dies sollte jetzt funktionieren.