Angular 9 - 无法绑定到 'formGroup'，因为它不是 'form' 的已知 属性，即使正在导入 FormsModule 和 FormBuilder

Question

咆哮

我会先说我的第一个 post 被某人无礼地关闭了业力农场，当提供的解决方案不起作用时，将我的 post 标记为关闭。并且链接的 "duplicate" post 显示了我在原始 post 中演示和尝试的相同解决方案，所以我希望其他 SO 浏览器不要那么不屑一顾，并阅读我的 post 在演示了一个未能解决我最初问题的解决方案后盲目决定将其关闭。

吐槽完毕

我正在尝试在 Angular 中创建一个登录表单 9. 我了解 Angular 中表单的一个常见问题源于未在 @NgModule

中导入 FormsModule

但是，我导入了 FormsModule 和 ReactiveFormsModule，但这并没有解决我的问题

//from app.module.ts
@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        ForumComponent,
        PostComponent,
        UserComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MaterialModule,
        FormsModule,
        FormBuilder,
        ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent],
})

下面是我的 login.component.html 文件中我的表单的 HTML，正如我将要演示的那样，我稍后稍作重构。

<form class="box" action="" #loginForm="ngForm" (ngSubmit)="login()">
    <div class="field">
        <label for="" class="label">Email</label>
        <div class="control has-icons-left">
            <input type="email" 
                    placeholder="e.g. bobsmith@rpi.edu" 
                    class="input" 
                    [(ngModel)] = "model.email"
                    required />
            <span class="icon is-small is-left">
                <i class="fa fa-envelope"></i>
            </span>
        </div>
    </div>
    <div class="field">
        <label for="" class="label">Password</label>
        <div class="control has-icons-left">
            <input type="password" 
                    placeholder="*******" 
                    class="input"
                    [(ngModel)] = "model.password"
                    required />
            <span class="icon is-small is-left">
                <i class="fa fa-lock"></i>
            </span>
        </div>
    </div>
    <div class="field">
        <label for="" class="checkbox">
            <input type="checkbox" />
            Remember me
        </label>
    </div>
    <div class="field">
        <button class="button is-success" [disabled]="!loginForm.valid">
            Login
        </button>
    </div>
</form>

我的第一个 post 的原始 reply/answer 建议我将 formControlName 添加到 <input> 标签，但随后被匆忙编辑为 [(ngModel)] 已弃用。在我插话并证明它仍然无效之前，我的 post 已关闭。

既然 anon 相信他知道他的解决方案有效，请允许我与您分享我当前的 HTML 表单设置。我遵循了 FormBuilder 的文档，结果就是这样。

<!-- LATEST HTML -->
<form class="box" action="" [formGroup]="loginForm" (ngSubmit)="login()">
    <div class="field">
        <label for="" class="label">Email</label>
        <div class="control has-icons-left">
            <input type="email" 
                    placeholder="e.g. bobsmith@rpi.edu" 
                    class="input" 
                    formControlName = "email"
                    required />
            <span class="icon is-small is-left">
                <i class="fa fa-envelope"></i>
            </span>
        </div>
    </div>
    <div class="field">
        <label for="" class="label">Password</label>
        <div class="control has-icons-left">
            <input type="password" 
                    placeholder="*******" 
                    class="input"
                    formControlName = "password"
                    required />
            <span class="icon is-small is-left">
                <i class="fa fa-lock"></i>
            </span>
        </div>
    </div>
    <div class="field">
        <label for="" class="checkbox">
            <input type="checkbox" />
            Remember me
        </label>
    </div>
    <div class="field">
        <button class="button is-success" [disabled]="!loginForm.valid">
            Login
        </button>
    </div>
</form>

在我的 login.component.ts 文件中，这就是我所拥有的

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { AuthService } from 'src/app/auth.service';
import { FormBuilder } from '@angular/forms';

@Component({
    selector: "app-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.css"],
})
export class LoginComponent implements OnInit {
    model: any = {};
    loginForm;

    constructor(
        private authService: AuthService,
        private router: Router,
        private formBuilder: FormBuilder
    ) {
        this.loginForm = this.formBuilder.group({
            email: '',
            password: ''
        });
    }

    ngOnInit(): void { }

    login() { 
        this.authService.login(this.model).subscribe(
            next => {
                this.router.navigate(['/home']);
            },
            error => {
                throw new Error("ERROR: Login failed");
            }
        );
    }
}

好的，很酷，完全按照官方 Angular Docs on FormBuilder 的规格重构。好吧，这是在我尝试为 Angular 应用程序提供服务时转储到我的控制台中的错误。

ERROR in src/app/components/login/login.component.html:6:34 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

    line 6  <form class="box" action="" [formGroup]="loginForm" (ngSubmit)="login()">
                                                            ~~~~~~~~~~~~~~~~~~~~~~~

src/app/components/login/login.component.ts:8:15
    line 8  templateUrl: "./login.component.html",
                        ~~~~~~~~~~~~~~~~~~~~~~~~

Error occurs in the template of component LoginComponent.

如前所述，现在两次，表单无法编译 - 即使完全按照文档进行操作也是如此。我将不胜感激我能得到的任何帮助，因为这个问题已经让我难受了几个小时。谢谢

Answer 1

如我所见，您尚未将登录组件添加到 app.module.ts 中的声明数组。这意味着您的应用程序中有另一个模块声明了 LoginComponent。因此，您必须在该模块文件中导入 FormsModules 和 Reactive 表单模块。

抱歉，这应该是一条评论，但我没有添加评论的特权。

Answer 2

我可以看到你没有将登录组件添加到 app.module.ts 请转到 login.component.ts 的模块并添加 FormsModule 和 ReactiveFormsModule 然后它会起作用我相信