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

Question

rant

为此，我说我的第一篇文章被某人的业力粗暴地关闭了，并在提供的解决方案不起作用时标记我的文章为关闭。链接的“重复”帖子显示了与我在原始帖子中演示并尝试过的解决方案相同的解决方案，因此，我希望其他SO浏览器不要那么无聊，并完整阅读我的帖子，然后再盲目决定将其关闭演示无法解决我最初的问题的解决方案。

结束剂

[我正在尝试在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. [email protected]" 
                    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>

对我的第一篇文章的原始答复/答案建议我将formControlName添加到<input>标记中，但随后匆匆进行了编辑以说已弃用[(ngModel)]。在我发表感言并证明它仍然无法正常工作之前，我的帖子已经关闭。

因此，由于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. [email protected]" 
                    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

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

对不起，这应该是评论，但我无权添加评论。