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

问题描述

咆哮

我会先说我的第一个帖子被某人无礼地关闭了业力农业，当提供的解决方案不起作用时，我的帖子被标记为关闭。链接的“重复”帖子显示了我在原始帖子中演示和尝试过的相同解决方案，所以我希望其他 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. 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>

我的第一篇文章的原始回复/答案建议我将 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. 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");
            }
        );
    }
}

好的，很酷，按照FormBuilder 上的官方 Angular 文档完全重构为规范。好吧，这是当我尝试为 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.

如图所示，现在两次，表单无法编译 - 即使完全遵循文档也是如此。我会很感激我能得到的任何帮助，因为这个问题已经让我陷入困境了好几个小时。谢谢

标签： javascriptangulartypescriptangular-ngmodelangular-forms

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

问题描述

解决方案

推荐阅读