FormGroupアイテム入力がIonic 2で更新されない

Question

私はAngular 2を初めて使っています。FormBuilder & FormGroupを使用して簡単なフォームを作成しようとしています。しかし、何らかの理由で私がusernameフィールドに入力したものが、コンポーネントから更新されていないため、Submitボタンをクリックしても新しい値が表示されません。私のビューとコンポーネントのコードは以下の通りです。誰かが問題点を教えてください。

login.ts

import { Component} from "@angular/core"; 
import {FormBuilder, FormGroup, Validators} from "@angular/forms"; 

@Component({ 
selector:"login-page", 
templateUrl: "login.html" 
}) 

export class LoginPage { 
    loginForm : FormGroup; 
    constructor(formBuilder :FormBuilder) { 
     this.loginForm = formBuilder.group({ 
      'username':[ 
       '', 
       Validators.required 
      ] 
     }); 
    } 

    validate() : boolean { 
     if (this.loginForm.valid) { 
      return true; 
     } 
    } 
    submit() : void { 
     if (!this.validate()) { 
      console.info("Invalid input") 
     } 
     let control = this.loginForm.controls['username'].value; 
     console.log(control); 
    } 
} 

login.htmlと

<ion-header style="text-align:center"> 
    <ion-navbar> 
    <ion-title>Please login</ion-title> 
    </ion-navbar> 
</ion-header> 


<ion-content padding> 

    <h3 style="text-align:center">Welcome to your first Ionic app!</h3> 


    <form class ="list" [formGroup]="loginForm" (ngSubmit)="submit()"> 
     <ion-item class="loginInput center"> 
      <ion-label floating>Email</ion-label> 
      <ion-input type="text" name='username' ngControl="username" ></ion-input> 
     </ion-item> 
     <div class="loginBtn"><button style="width: 140px" ion-button type="submit">Login</button></div> 
    </form> 

</ion-content> 

Answer 1

変更

<ion-input type="text" name='username' ngControl="username" ></ion-input>

へ

<ion-input type="text" [formControl]="loginForm.controls['username']" ></ion-input> 

Answer 2

以下の変更を行う必要があります。

.TS

<form class ="list" [formGroup]="loginForm" (submit)="submit(loginForm)"> 
     <ion-item class="loginInput center"> 
      <ion-label floating>Email</ion-label> 
      <ion-input type="text" name='username' formControlName="username" ></ion-input> 
     </ion-item> 
     <div class="loginBtn"><button style="width: 140px" ion-button type="submit">Login</button></div> 
    </form>