2016-10-25 13 views
11

私はまだこれについて新しく、チュートリアルで学習していますが、ユニークなユーザー名をテストしようとすると何らかの理由でメッセージNo provider for formbuilderが表示されます。 このメッセージが表示される理由はわかりませんが、解決策を見つけることができません。誰がなぜこれが起こっているのか教えてもらえますか?あなたがを使用しているモジュールでFormBuilderのプロバイダがありません。

サインアップ-component.ts

import {Component} from '@angular/core'; 
import {ControlGroup, Control, Validators, FormBuilder} from '@angular/common' 
import {UsernameValidators} from './usernameValidators' 

@Component({ 
selector: 'signup', 
templateUrl: 'signup-component.html' 

}) 
export class SignupComponent{ 
    form: ControlGroup; 

    constructor(fb: FormBuilder){ 
    this.form = fb.group({ 
     username:['', Validators.compose([ 
      Validators.required, UsernameValidators.cannotContainSpace 
     ])], 
     password: ['', Validators.required] 
    }) 
    } 
} 

usernameValidators.ts

import {Control} from '@angular/common' 


export class UsernameValidators{ 

    static shouldBeUnique(control: Control){ 
    return new Promise((resolve, reject) => { 
     setTimeout(function(){ 
     if(control.value == "andy") 
      resolve({shouldBeUnique: true}); 
     else 
      resolve(null); 
     }, 1000); 

    }); 

    } 


    static cannotContainSpace(control: Control){ 
    if (control.value.indexOf(' ') >= 0) 
     return {cannotContainSpace: true}; 

    return null; 
    } 
} 

答えて

27

インポートReactiveFormsModuleFormsModule

@NgModule({ 
    imports: [ 
     BrowserModule /* or CommonModule */, 
     FormsModule, ReactiveFormsModule 
    ], 
    ... 
}) 
+2

ありがとうございました!それは働いて、私はこれが見つからなかったので、ReactiveFormsModuleをapp.module.tsにインポートしました – sabin

+0

ReactiveFormmoduleとFormsModuleを同じモジュールで一緒にインポートするべきではありません – DAG

+0

@dagなぜですか? '6つ以上行く... ' – tom10271

関連する問題