Ionic 2 Validating username at signup - validation

Question

I'm new to Ionic/Angular 2..
Try to use custom validators to validate the username but at server but i´m stack into this problem...
Property 'getUserByLogin' does not exist on type 'typeof
UserValidator'.
I have an sigunp.html page ...
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{ "SIGNUP" | translate }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="login-page">
<div class="logo">
<img src="assets/img/appicon.svg" alt="Ionic Logo">
</div>
<ion-card>
<p ion-text>Teste</p>
<ion-card-content *ngFor="let user of users">
<h1>{{user.nome}}</h1>
<p>{{user.password}}</p>
</ion-card-content>
</ion-card>
<form [formGroup]="signupForm" (ngSubmit)="postSignupForm()" >
<ion-list no-lines>
<ion-item>
<ion-label floating>{{ "USER_NAME" | translate }}</ion-label>
<ion-input type="text" formControlName="login" clearInput></ion-input>
</ion-item>
<ion-item text-wrap *ngIf="!signupForm.controls.login.valid && (signupForm.controls.login.dirty || submitAttempt)">
<p ion-text color="danger">{{ "INVALID_USER_NAME" | translate }}</p>
</ion-item>
<ion-item *ngIf="signupForm.controls.login.pending">
<p ion-text color="danger">{{ "VALIDATION_IN_PROGRESS" | translate }}</p>
</ion-item>
<ion-item *ngIf="!signupForm.controls.login.valid && !signupForm.controls.login.pending && (signupForm.controls.login.dirty || submitAttempt)">
<p ion-text color="danger">{{ "USER_NAME_IN_USE" | translate }}</p>
</ion-item>
<ion-item>
<ion-label floating>{{ "PASSWORD" | translate }}</ion-label>
<ion-input type="password" formControlName="password" clearInput></ion-input>
</ion-item>
<ion-item text-wrap *ngIf="!signupForm.controls.password.valid && (signupForm.controls.password.dirty || submitAttempt)">
<p ion-text color="danger">{{ "INVALID_PASSWORD" | translate }}</p>
</ion-item>
<ion-item>
<ion-buttons end>
<ion-row responsive-sm>
<ion-col>
<button [disabled]="signupForm.invalid" type="submit" ion-button icon-left block>
<ion-icon name="add"></ion-icon>
<label>{{ "CREATE" | translate }}</label>
</button>
</ion-col>
<ion-col>
<button (click)="onFacebook(signupForm)" ion-button icon-left block>
<ion-icon name="logo-facebook"></ion-icon>
<label>{{ "FACEBOOK" | translate }}</label>
</button>
</ion-col>
</ion-row>
</ion-buttons>
</ion-item>
</ion-list>
</form>
</ion-content>
And a signup.ts with
import { Component } from '#angular/core';
import {Validators, FormBuilder } from '#angular/forms';
import { NgForm } from '#angular/forms';
import { NavController } from 'ionic-angular';
import { TabsPage } from '../tabs/tabs';
import { UserData } from '../../providers/user-data';
import { UserProvider } from '../../providers/user-provider';
import { UserValidator } from '../../validators/user-validator';
#Component({
selector: 'page-user',
templateUrl: 'signup.html'
})
export class SignupPage {
signupForm : any = {};
users :any [];
id : number = 0;
signup: {username?: string, password?: string} = {};
submitted = false;
constructor(public navCtrl: NavController, public formBuilder : FormBuilder, public userData: UserData, public userService : UserProvider ) {
this.signupForm = this.formBuilder.group({
login : ['', Validators.compose( [ Validators.minLength(6)
, Validators.required
, Validators.pattern('[a-zA-Z]*') ] )
, UserValidator.checkUsername
],
password : ['', Validators.compose( [ Validators.minLength(6)
, Validators.required
] )
]
});
}
getAllUsers() {
return this.userService.getAllUsers().subscribe(
data=>this.users=data,
err=>console.log(err)
)
}
getUser( id : number ) {
return this.userService.getUser( id ).subscribe(
data=>this.users=data,
err=>console.log(err)
)
}
getUserByLogin( login : string ) {
return this.userService.getUserByLogin( login ).subscribe(
data=>this.users=data,
err=>console.log(err)
)
}
postSignupForm (){
console.log( this.signupForm.value );
}
onSignup(form: NgForm) {
this.submitted = true;
if (form.valid) {
this.userData.signup(this.signup.username);
this.navCtrl.push(TabsPage);
}
}
onFacebook(form: NgForm) {
this.getUser(2);
console.log( form.value );
}
}
Where i call an UserValidator.checkUsername that is created at...
import { FormControl } from '#angular/forms';
import { UserProvider } from '../providers/user-provider';
export class UserValidator {
wsreturn : any = [];
constructor( public userService : UserProvider ) {
}
getUserByLogin( login : string ) {
return this.userService.getUserByLogin( login ).subscribe(
data=>this.wsreturn=data,
err=>console.log(err)
)
};
static checkUsername(control: FormControl): any {
return new Promise(resolve => {
//console.log ( '------->' ); console.log ( control.value );
this.getUserByLogin( control.value ); /// I NEED HELP!
// Fake a slow response from server
setTimeout(() => {
if(control.value.toLowerCase() === "luciano"){
resolve({
"username taken": true
});
} else {
resolve(null);
}
}, 2000);
});
}
}
My user-privider is this one...
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { GlobalProvider } from '../providers/global-provider';
#Injectable()
export class UserProvider {
constructor(public http: Http, public global: GlobalProvider) {
}
getAllUsers() {
return this.http.get(this.global.serverAdress + '/usuario', { headers: this.global.headers } ).map(res=>res.json())
}
getUser( id : number ) {
return this.http.get(this.global.serverAdress + '/usuario/'+ id, { headers: this.global.headers } ).map(res=>res.json())
}
getUserByLogin( login : string ) {
return this.http.get(this.global.serverAdress + '/usuario/porlogin/'+ login, { headers: this.global.headers } ).map(res=>res.json())
}
postUser( id : number ) {
return this.http.get(this.global.serverAdress + '/usuario/'+ id, { headers: this.global.headers } ).map(res=>res.json())
}
}

Answer 1

you can not call instance method in static method with this keyword. create directive instead
import { Directive, forwardRef } from '#angular/core';
import { NG_VALIDATORS, FormControl, Validator } from '#angular/forms';
#Directive({
selector: '[checkUsername][ngModel],[checkUsername][formControl]',
providers: [
{ provide: NG_VALIDATORS, useExisting: forwardRef(() => CheckUsernameValidator), multi: true }
]
})
export class CheckUsernameValidator implements Validator {
constructor(public userService: UserProvider) {
}
getUserByLogin(login : string) {
return this.userService.getUserByLogin(login);
};
validate(c: FormControl) {
return new Promise(resolve => { //
this.getUserByLogin( control.value ).subscribe(
data => {
if(control.value.toLowerCase() === "luciano"){
resolve({
"username taken": true
});
} else {
resolve(null);
}
},
err => {
console.log(err);
resolve(null);
}
);
}
}
in your html:
<ion-input type="text" formControlName="login" checkUsername clearInput></ion-input>

Answer 2

I move checkUsername to signup.ts with and made some changes to "bind(this)"... its working as i want but i´m still reading more about "creating directives"...
thanks #tiep-phan and #suraj.
....
constructor(public navCtrl: NavController, public formBuilder : FormBuilder, public userData: UserData, public userService : UserProvider ) {
this.signupForm = this.formBuilder.group({
login : ['', Validators.compose( [ Validators.minLength(6)
, Validators.required
, Validators.pattern('[a-zA-Z]*') ] )
, this.checkUsername.bind(this)
],
password : ['', Validators.compose( [ Validators.minLength(6)
, Validators.required
] )
]
});
}
checkUsername(control: FormControl): any {
return new Promise( resolve => {
this.userService.getUserByLogin( control.value ).subscribe(
data=>{
// console.log('Sucesso:'); console.log(data[0]);
if ( typeof data[0] !== "undefined") {
if ( typeof data[0].login === "undefined") {
resolve(null);
} else {
// username encontrado no banco de dados
resolve( { "INVALID_USER_NAME": true } );
}
} else {
resolve(null);
}
},
err=>{ console.log('Erro:'); console.log(err); }
)
});
}
....