How to solve the "Error: unclean (in the promise): Error: no provider for" error in Ionic 3

Question

I am studying Ionic 3 and I get this error when trying to create a special validator that validates a unique username. I tried my best, but could not solve this problem.

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() { } } 

This is the error I get:

 "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

You need to add the provider to the NgModule module, i.e. module.ts under the providers,

 providers: [ CustomValidators ] 

Answer 2

From what I see, you are missing two things

1) there is no decorator for the class, you import Directive , but never use it

 import { Directive } from '@angular/core'; @Directive({ name: 'directive-name' }) export class CustomValidators { //... } 

2) no import in NgModule

 import { CustomValidators } from 'path/to/file'; @NgModule({ //... providers: [ CustomValidators ] })