Angular - Невозможно привязать к formGroup, так как это не известное свойство form - PullRequest
Новая
       0

Angular - Невозможно привязать к formGroup, так как это не известное свойство form

0 голосов
/ 15 апреля 2020

Я создал новое приложение с 2 модулями, при попытке добавить форму в один из моих модулей я получаю сообщение об ошибке: 

Can't bind to 'formGroup' since it isn't a known property of 'form'.

Я знаю, что это довольно распространенная проблема, поэтому я немного погуглил и перед тем, как написать этот тикет, я убедился, что в моем модуле есть ReactiveFormsModule. Но я все еще вижу ошибку, поэтому проблема, очевидно, есть, потому что вот мой код: 

// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
  ],
  providers: [
    // My providers
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

В модуле App все работает нормально, если я пытаюсь сделать так, чтобы все работало без проблем. 

// auth.module.ts
@NgModule({
  imports: [CommonModule, ReactiveFormsModule, RouterModule],
  declarations: [LoginComponent],
  providers: [
    // My providers
  ],
})
export class AuthModule {}

Внутри моего LoginComponent (который зарегистрирован в AuthModule, у меня есть такой код: 

  public form: FormGroup;

  constructor(private fb: FormBuilder) {}
  public ngOnInit(): void {
    this.form = this.fb.group({
      username: ['', [Validators.required]],
      password: ['', Validators.required],
    });
  }

, и мой шаблон прост, как это: 

<form [formGroup]="form"></form>

I Проверенные миллионы раз, что я импортировал ReactiveFormsModule в оба моих модуля, а также что у меня есть все сохраненное. Я перезагружал CLI несколько раз, чтобы убедиться, что он где-то просто не завис.

У меня нет идей, что я я делаю неправильно.

Ответы [ 2 ]

1 голос
/ 15 апреля 2020

Вам нужно будет импортировать ОБА FormsModule и ReactiveFormsModule в свои AuthModule

// auth.module.ts
@NgModule({
  imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule],
  declarations: [LoginComponent],
  providers: [
    // My providers
  ],
})
export class AuthModule {}
0 голосов
/ 15 апреля 2020

Вы должны импортировать AuthModule в свой AppModule. См. Документацию 

// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
    AuthModule
  ],
  providers: [
    // My providers
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}
...