Angular2 ngForm nie działa

Question

Próbuję wykonać składnik formularza logowania, ale nie mogę odczytać danych formularza.

Kiedy próbuję zapisać nazwę użytkownika na konsoli, "undefined" pisze.

Wszystko wydaje się normalne, ale dane formularzy nie docierają do komponentu.

Poniżej znajduje się kod HTML:

<form (ngSubmit)="onSubmit(myForm)" 
     #myForm="ngForm" 
     class="form-signin"> 
    <div class="form-group"> 
     <h2 class="form-signin-heading">Please sign in</h2> 
     <input type="text" 
       id="inputUsername" 
       name="inputUsername" 
       class="form-control" 
       placeholder="User Name" 
       required> 
     <input type="password" 
       id="inputPassword" 
       name="inputPassword" 
       class="form-control" 
       placeholder="Password" > 
    </div> 
    <button class="btn btn-lg btn-primary btn-block" 
      type="submit">Sign in</button> 
</form> 

Komponent ts:

@Component({ 
    selector: 'signin', 
    templateUrl: './signin.component.html', 
    encapsulation: ViewEncapsulation.None 
}) 
export class SigninComponent implements OnInit{ 
    constructor(){} 

    ngOnInit(){ } 

    onSubmit(form: NgForm){ 
     console.log(form.value.inputUsername); 
    } 
} 

góry dzięki.

Answer 1

Musisz dodać dyrektywę ngModel do każdego z pól formularza. Spowoduje to rejestrację pól formularza w formularzu.

<input type="text" 
      id="inputUsername" 
      name="inputUsername" 
      class="form-control" 
      placeholder="User Name" 
      ngModel 
      required>