web-dev-qa-db-ja.com

Ionic 3

私はIonic 3を学んでおり、一意のユーザー名を確認するカスタムバリデータを作成しようとするとこのエラーが発生します。最善を尽くしましたが、この問題を解決できませんでした。

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

  }


}

これは私が得ているエラーです：

"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

プロバイダーをNgModuleに追加する必要があります。つまり、プロバイダーの下のmodule.ts、

providers: [
  CustomValidators 
]
21
Sajeetharan

私が見ることができるものから、あなたは2つのものを見逃しています

1）クラスのデコレータがありません。Directiveをインポートしていますが、使用していません

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

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

2）NgModuleにはインポートがありません

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

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