Как сделать форму в ионной 2

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