FormGroup 项目输入未在 Ionic 2 上更新答案

【问题标题】：FormGroup item input not updating on Ionic 2FormGroup 项目输入未在 Ionic 2 上更新
【发布时间】：2018-01-17 13:38:17
【问题描述】：

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

【问题讨论】：

标签： angular typescript ionic2

【解决方案1】：

改变

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

到

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

【讨论】：

感谢@Prerak，您建议的更改工作正常

【解决方案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>

【讨论】：