2017-08-01 4 views
0

tsコード:username2のmaxlengthの検証がSamsungのデバイスで動作していません。数値データで正常に動作しますが、英数字で作業しません

すべての必要なコンポーネントがインポートされました。 HTMLで

constructor(public platform: Platform, public formBuilder: FormBuilder,public navCtrl: NavController public http: Http) { 
this.loginForm = new FormGroup({ 
    userName: new FormControl('', Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(16)])), 
    password: new FormControl('', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(16)])) 
    enableTouchId: new FormControl(false, []) 
}); 
} 

<form [formGroup]="loginForm" name="loginForm" (ngSubmit)="login(loginForm)"> 
    <ion-row> 
    <ion-col> 
     <ion-list no-lines> 
     <ion-item class="member-item"> 
      <ion-input type="text" placeholder="Username" [readonly]="isReadOnly()" formControlName="userName" name="userName" [(ngModel)]="userName" minlength="5" maxlength="16" required></ion-input> 
      <ion-icon ios="ios-person" md="md-person" item-left></ion-icon> 
     </ion-item> 
     </ion-list> 
    </ion-col> 
</ion-row> 
</form> 

私が確認した/ソリューションを出stackoverflowのが、運がテストされています。

+0

反応する形式(これが現れる)では、 '(ngModel) 'は必要ありません。代わりに、提出物'(ngSubmit) 'からフォームの値を取得する必要があります。あなたは現在、反応とテンプレートのフォームを混合しています – 0mpurdy

答えて

0

あなたが検証してFormBuilderを使用する場合は、あなたのhtmlでそれらを繰り返す必要はありません、そして、あなたのHTMLは次のようになりますので、あなたが入力を識別するために必要なのは、formControlName="userName"次のとおりです。

<form [formGroup]="loginForm" name="loginForm" (ngSubmit)="login()"> 
    <ion-row> 
    <ion-col> 
     <ion-list no-lines> 
     <ion-item class="member-item"> 
      <ion-input type="text" placeholder="Username" [readonly]="isReadOnly()" formControlName="userName"></ion-input> 
      <ion-icon ios="ios-person" md="md-person" item-left></ion-icon> 
     </ion-item> 
     </ion-list> 
    </ion-col> 
</ion-row> 
</form> 

を次にlogin()にはthis.loginFormを使用してフォームを処理します。

関連する問題