Angular FormGroup项目输入未在Ionic 2上更新
我是新来的。我正在尝试使用Angular FormGroup项目输入未在Ionic 2上更新,angular,typescript,ionic2,Angular,Typescript,Ionic2,我是新来的。我正在尝试使用FormBuilder和FormGroup创建一个简单的表单。但由于某些原因,无论我在视图的用户名字段中输入什么,都不会在我的组件上更新,当我单击提交按钮时,都看不到新值。我的观点和组件代码如下,请有人告诉我是什么问题 login.ts import { Component} from "@angular/core"; import {FormBuilder, FormGroup, Validators} from "@angular/forms"; @Compone
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>
请登录
欢迎使用您的第一款Ionic应用程序!
电子邮件
登录
更改
到
您需要执行以下更改 .ts .html
电子邮件
登录
谢谢@Prerak,您建议的更改很好
<ion-input type="text" [formControl]="loginForm.controls['username']" ></ion-input>
loginForm : FormGroup;
constructor(formBuilder :FormBuilder) {
this.loginForm = formBuilder.group({
username:['',Validators.required]
});
}
<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>