没有FormBuilder的提供者

use*_*680 44 angular

我仍然是新手并通过教程学习,但由于某种原因,我No provider for 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]
    })
  }
}
Run Code Online (Sandbox Code Playgroud)

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;
  }
}
Run Code Online (Sandbox Code Playgroud)

Gün*_*uer 85

导入ReactiveFormsModuleFormsModule

@NgModule({
  imports: [
      BrowserModule /* or CommonModule */, 
      FormsModule, ReactiveFormsModule
  ],
  ...
})
Run Code Online (Sandbox Code Playgroud)

在您正在使用的模块中 FormBuilder

  • 谢谢!它工作,我在app.module.ts中导入了ReactiveFormsModule,因为它丢失了 (4认同)
  • 这应该是一个已接受的答案。 (2认同)
  • 我必须将其导入到 app.module.ts 中才能使其正常工作...很烦人,因为它使初始页面加载变得臃肿 - 尽管我没有注意到页面加载速度减慢太多 (2认同)