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

Posted 2023-03-13

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

【英文标题】：Angular 9 - Can't bind to 'formGroup' since it isn't a known property of 'form' even though FormsModule and FormBuilder are being imported

【发布时间】：2020-08-10 13:42:26

【问题描述】：

咆哮

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

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

【参考方案1】：

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

对不起，这应该是一个评论，但我没有特权添加 cmets。

【参考方案2】：

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