Comment résoudre "Erreur: Uncaught (en promesse): Erreur: Aucun fournisseur pour" erreur dans Ionic 3

Question

J'apprends Ionic 3 et je reçois cette erreur en essayant de faire un validateur personnalisé qui vérifie un unique Nom d'utilisateur. J'ai fait de mon mieux mais je n'ai pas pu résoudre ce problème.

CustomValidators.ts

import { Directive, Input } from '@angular/core'; 

import { FormControl, Validator, AbstractControl } from '@angular/forms'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import {Observable} from 'rxjs/Rx'; 

export class CustomValidators { 


    constructor(public http: Http){} 

     public hasUniqueEmail(
     control: FormControl, 
    ){ 

     return this.http.get('assets/users.json') 
     .map(res => res.json()) 
     .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 

     } 


} 

signup.ts

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
import { CustomValidators } from '../../components/CustomValidators'; 

/** 
* Generated class for the SignupPage page. 
* 
* See http://ionicframework.com/docs/components/#navigation for more info 
* on Ionic pages and navigation. 
*/ 


@IonicPage() 

@Component({ 
    selector: 'page-signup', 
    templateUrl: 'signup.html', 
}) 


export class SignupPage { 

    private sform : FormGroup; 

    constructor(
     private formBuilder: FormBuilder, 
     private myValidator: CustomValidators, 
    ){ 

    this.sform = this.formBuilder.group({ 
     name: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])], 
     email: ['', Validators.compose([Validators.email,this.myValidator.hasUniqueEmail])], 
     password: ['',Validators.required                        ], 
    }); 

    } 


    logForm() { 

    } 


} 

C'est l'erreur que je reçois:

"Uncaught (in promise): Error: No provider for CustomValidators! 
Error 
    at Error (native) 
    at injectionError (http://localhost:8100/build/main.js:1583:86) 
    at noProviderError (http://localhost:8100/build/main.js:1621:12) 
    at ReflectiveInjector_._throwOrNull (http://localhost:8100/build/main.js:3122:19) 
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8100/build/main.js:3161:25) 
    at ReflectiveInjector_._getByKey (http://localhost:8100/build/main.js:3093:25) 
    at ReflectiveInjector_.get (http://localhost:8100/build/main.js:2962:21) 
    at NgModuleInjector.get (http://localhost:8100/build/main.js:3909:52) 
    at resolveDep (http://localhost:8100/build/main.js:11369:45) 
    at createClass (http://localhost:8100/build/main.js:11225:91)" 

Answer 1

Vous devez ajouter le fournisseur à la NgModule , c'est-à-dire module.ts sous fournisseurs,

providers: [ 
    CustomValidators 
] 

Answer 2

D'après ce que je peux voir que vous manque 2 choses

1) pas de décorateur pour la classe, vous importez Directive mais jamais l'utiliser

import { Directive } from '@angular/core'; 

@Directive({ 
    name: 'directive-name' 
}) 
export class CustomValidators { 
    //... 
} 

2) il n'y a pas d'importation dans le NgModule

import { CustomValidators } from 'path/to/file'; 

@NgModule({ 
    //... 
    providers: [ 
    CustomValidators 
    ] 
})