angular - 如何在离子2中制作表格

Question

我想尝试 ionic/angular 2，但我不知道如何创建表单。我怎样才能做到这一点？

Answer 1

首先，让我们假设一个创建登录表单的简单案例。

• 形式：

  • （输入）用户名

  • （输入密码

  • （按钮）登录

您的 .html 文件：

        <form [ngFormModel]="loginForm" (submit)="login($event)">
            <ion-input stacked-label>
                <ion-label>Username</ion-label>
                <input type="text" ngControl="username">
            </ion-input>

            <ion-input stacked-label>
                <ion-label>Password</ion-label>
                <input type="password" ngControl="password">
            </ion-input>

            <div padding>
                <button block type="submit" [disabled]="!loginForm.valid">Login</button>
            </div>
        </form>

在您的 .js 文件中：

import {FormBuilder, Validators} from 'angular2/common';

export class LoginPage {

  constructor(form: FormBuilder) {
    // Create a new form group
    this.loginForm = form.group({ // name should match [ngFormModel] in your html
      username: ["", Validators.required], // Setting fields as required
      password: ["", Validators.required]
  }

  // This is called on form submit
  login(event) {
    console.log(this.loginForm.value) // {username: <usename>, password: <password> }
    event.preventDefault();
  }

}

参考