Question

我想尝试离子/角度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();
  }

}

Reference

如何在离子2中制作表格

1 个答案: