イオン2私は2角度イオン/への新たなんだ、申し込み

Question

でユーザー名を検証..

使用してみてください、カスタムユーザー名を検証するためにバリデータが、サーバではなく - 私はこの問題にスタック...

プロパティ 'getUserByLogin'がタイプ 'typeof UserValidator'に存在しません。

<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> 

私はsigunp.htmlページを持っている

...と私は時に作成されUserValidator.checkUsernameを呼び出す

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); 
    } 


} 

とsignup.ts ...

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); 

    }); 
    } 

} 

私のuser-prividerはこれです...

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

あなたはthisキーワードでstatic方法でinstanceメソッドを呼び出すことはできません。私が望むように、その作業...私はとsignup.tsするcheckUsernameを移動し、「バインド（これ）」にいくつかの変更を加え

<ion-input type="text" formControlName="login" checkUsername clearInput></ion-input> 

Answer 2

しかし、私：代わりにあなたのhtmlで

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); 
     } 
    ); 
    } 
} 

をディレクティブを作成「ディレクティブの作成」についてもっと詳しく読んでいます...

ありがとう@ tiep-phanと@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); } 
     ) 
    }); 
    } 

....