web-dev-qa-db-fra.com

Comment résoudre "Erreur: non capturée (en promesse): erreur: aucun fournisseur pour" erreur dans Ionic 3

J'apprends Ionic 3 et j'obtiens cette erreur en essayant de faire un validateur personnalisé qui vérifie un nom d'utilisateur unique. 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() {

  }


}

Voici l'erreur que j'obtiens:

"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)"
javascriptangularionic3
13
J Snow

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

providers: [
  CustomValidators 
]
21
Sajeetharan

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

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

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
  ]
})
1
Baruch