javascript - 无法将 formGroup 与 firebase 错误绑定

Question

我目前正在学习如何将 FormBuilder 和 Modals 与 firebase 后端一起使用。我不知道为什么，但我收到了这个错误：'不能绑定到'formGroup'，因为它不是'form'的已知属性。'

这是 html 文件的样子：

<div class="row">
    <div class="col-3">
        <div class="card mt-4">
            <div class="card-body">
                <h3>Personal information</h3>
                <form [formGroup]="userProfileForm" (ngSubmit)="onSubmit()">
                    <div class="form-group">
                        <label for="firstName">
                            First name:
                            <input id="firstName" class="form-control" type="text" formControlName="firstName" />
                        </label>

                        <label for="lastName">
                            Last name:
                            <input id="lastName" class="form-control" type="text" formControlName="lastName" />
                        </label>
                    </div>

                    <div class="form-group" formGroupName="address">
                        <label>
                            City:
                            <input class="form-control" type="text" formControlName="city" />
                        </label>
                        <label>
                            Street:
                            <input class="form-control" type="text" formControlName="street" />
                        </label>
                        <label>
                            Zip code:
                            <input class="form-control" type="text" formControlName="zip" />
                        </label>
                        <label>
                            State:
                            <input class="form-control" type="text" formControlName="state" />
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary" [disabled]="!userProfileForm.valid">
                        Submit
                    </button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-9">

    </div>
</div>

这是 ts 文件：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

  constructor(
    private modalService: NgbModal,
    private fb: FormBuilder
    ) { 

  }

  ngOnInit(): void {
  }

  userProfileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],

    address: this.fb.group({
      city: ['', Validators.required],
      street: ['', Validators.required],
      zip: ['', Validators.required],
      state: ['', Validators.required]
    })
  })

  onSubmit() {
    console.log(this.userProfileForm.value)
  }
}

这是模块文件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { environment } from 'src/environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';

import { AppComponent } from './app.component';
import { FormComponent } from './components/form/form.component';


@NgModule({
  declarations: [
    AppComponent,
    FormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireAuthModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我注意到的一件事是，如果我从 AngularFire 导入模块，则会弹出此错误。如果我注释掉 AngularFireModule、AngularFirestoreModule 和 AngularFireAuthModule，错误就会消失，一切正常。

有人知道为什么会这样吗？谢谢你的任何回答。

标签： javascriptangulartypescriptfirebase