I'm learning Ionic 3 and I'm getting this error when trying to make a custom validator which checks for a unique username. I've tried my best but couldn't solve this issue.

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 that I'm getting:

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)