FormGroup項目輸入不在Ionic 2上更新

Question

我是Angular 2的新手。我試圖用FormBuilder & FormGroup創建一個簡單的表格。但由於某種原因，無論我在視圖的用戶名字段中輸入的內容是不是在我的組件上更新，單擊提交按鈕時都無法看到新值。我的觀點和組件代碼如下，有人可以指出我有什麼問題。

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

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

的.html

<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>