首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何用离子2制作表格

如何用离子2制作表格
EN

Stack Overflow用户
提问于 2015-12-06 23:05:36
回答 1查看 12.6K关注 0票数 7

我想试试离子/角度2,但我不知道如何创建一个形式。我该怎么做?

EN

回答 1

Stack Overflow用户

发布于 2015-12-26 18:47:12

首先,让我们假设创建登录表单的简单情况。

  • 表格:
代码语言:javascript
复制
- (input) username
- (input) password
- (button) login

您的.html文件:

代码语言:javascript
复制
        <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文件中:

代码语言:javascript
复制
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

票数 24
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34123976

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档