ionic3 Form表单的使用

1 相关Html

<form (submit)="processForm()" [formGroup]="form">
      <ion-list>
      <ion-item>
        <ion-input formControlName="firstName" type="text" placeholder="First Name"></ion-input>
      </ion-item>
      <ion-item>
        <ion-input formControlName="lastName" type="text" placeholder="Last Name"></ion-input>
      </ion-item>
    </ion-list>
    <div padding>
      <button ion-button block type="submit">Create Account</button>
    </div>
  </form>

2 相关js

import {FormGroup,FormControl,Validators} from "@angular/forms"
form;    声明一下
在constrator中 定义 form 
this.form = new FormGroup({
   firstName:new FormControl('',Validators.required),
   lastName:new FormControl('',Validators.required),
})
processForm(){
   let alert = this.alertCtrl.create({
      title: "Account Created",
      message: "Created Account for: " + this.form.value.firstName + " " + this.form.value.lastName,
      buttons: [{
        text: 'Ok',
      }]
    });

    if (this.form.status === 'VALID') {
      alert.present()
    }
}

3 其中相关html样式

   <ion-item>       提示居左
      <ion-label fixed>Username</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
    <ion-item>   点击输入的情况下，提示上移
        <ion-label floating>Username</ion-label>
        <ion-input type="text" value=""></ion-input>
      </ion-item>
      <ion-item>     一直提示在上方
      <ion-label stacked>Username</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>