最後のionicでユーザーフォームを設定する方法2

Question

私はイオン2を試してチュートリアルForms with FormBuilder を作成しますが、動作しませんでした。名前をtodoで見つけることができないか、DIを使用してコンストラクタで宣言します？ login.ts：

import { Component } from '@angular/core'; 
import { NavController,LoadingController } from 'ionic-angular'; 
import {Validators, FormBuilder,FormGroup,FormControl } from '@angular/forms'; 


@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html' 
}) 
export class Login { 

    constructor(public navCtrl: NavController, 
       public loadingCtrl: LoadingController, 
       public formbuilder:FormBuilder, 
       public userform:FormGroup, 
       public username:FormControl, 
       public password:FormControl 
      ) {} 



    ionViewLoaded() { 
       console.log('Hello Login Page'); 
       this.userform = this.formbuilder.group({ 
       username: ['', Validators.required], 
       password: ['',Validators.required] 
      }); 
     } 
} 

login.htmlと：

<ion-header> 
    <ion-navbar> 
     <ion-title> 
      User Login 
     </ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content > 
    <form [formGroup]="userform" (ngSubmit)="onCommit()"> 
     <ion-item> 
      <ion-label>username</ion-label> 
      <ion-input type="text" formControlName="username" name="username"></ion-input>   
     </ion-item> 
     <ion-item> 
      <ion-label>password</ion-label> 
      <ion-input type="password" formControlName="password" name="password"></ion-input> 
     </ion-item> 
    </form> 
    <div padding> 
     <button ion-button type="submit" block 
     [disabled]="!userform.controls.username.valid || !userform.controls.password.valid" 
     >login</button> 
    </div> 
</ion-content> 

Answer 1

Ionic2フォームを作成するためにformBuidlerを使用する方法FormGroup.soのためのプロバイダが私のコードthanks.hereませんエラーをスローします、RC1。

1 - 輸入：

import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; 

2 - あなたの.TSファイル：

export class Registration { 
    myForm: FormGroup; 
    userInfo: {user: string, password: string} = {user: '', password: ''}; 

    constructor(public formBuilder: FormBuilder) { 

     this.myForm = this.formBuilder.group({ 
      'user': ['', [Validators.required]], 
      'password': ['', [Validators.required, this.passwordValidator.bind(this)]] 
     }); 
    } 

    passwordValidator(control: FormControl): {[s: string]: boolean} { 
     if (control.value !== '') { 
      if (!control.value.match(/^(?=.*\d).{4,30}$/)) { 
       return {invalidPassword: true}; 
      } 
     } 
    } 

    isValid(field: string) { 
     let formField = this.myForm.get(field); 
     return formField.valid || formField.pristine; 
    } 

    onSubmit() { 
     console.log('submitting form'); 
    } 
} 

3 - あなたの.htmlをファイル：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 
    <ion-item> 
     <ion-label>User</ion-label> 
     <ion-input [(ngModel)]="userInfo.user" formControlName="user" type="text"></ion-input> 
    </ion-item> 
    <p *ngIf="!isValid('user')" color="danger" padding-left>Insert an username"</p> 

    <ion-item> 
     <ion-label>Password</ion-label> 
     <ion-input [(ngModel)]="userInfo.password" formControlName="password" type="password"></ion-input> 
    </ion-item> 
    <p *ngIf="!isValid('password')" color="danger" padding-left>Invalid password. At least 4 chars and a number.</p> 

    <button ion-button type="submit" [disabled]="!myForm.valid">Create Account</button> 
</form> 

これは動作するはずです。少なくとも私のプロジェクトでは、魅力のように走っています。

その他に関する情報はここで見つけることができます：Ionic2 Form

はそれが役に立てば幸い！

Answer 2

mosca90の回答に追加します。あなたは、ユーザーが何かをやって、彼はまだ入力している間に直面する代わりに、ユーザーにエラーを示すの次のフィールドに移動していない場合、エラーを表示するように

<p *ngIf="!isValid('user') && myForm.controls.user.touched" color="danger" padding-left>Insert an username"</p> 

追加することができます。