无法绑定到“formGroup”，因为它不是登录组件中“form”的已知属性

Posted 2023-03-13

【中文标题】无法绑定到“formGroup”，因为它不是登录组件中“form”的已知属性

【英文标题】：Can't bind to 'formGroup' since it isn't a known property of 'form' just in logincomponent

【发布时间】：2021-07-22 02:39:05

【问题描述】：

我使用 Angular ReactiveFormsModule 创建了一个表单，但在构建应用程序时收到此错误消息

src/app/security/login/login.component.html:11:13 中的错误 - 错误 NG8002：无法绑定到“formGroup”，因为它不是“form”的已知属性。

11

用于登录组件。

我在 LogoutComponent 中复制了相同的代码（用于测试），这个组件没有错误。这两个组件在同一个模块 -security 中。

login.component.html:

<div class="wrapper fadeInDown">
    <div id="formContent">
      <!-- Tabs Titles -->
  
      <!-- Icon -->
      <div class="fadeIn first">
        <img src="" id="icon"  />
      </div>
  
      <!-- Login Form -->
      <form [formGroup]="loginForm" (ngSubmit)="loginProces()">
        <input type="text" id="login" class="fadeIn second" name="login" formControlName="username" placeholder="login">
        <input type="text" id="password" class="fadeIn third" name="login" formControlName="password" placeholder="password">
        <input type="submit" class="fadeIn fourth" value="Log In">
      </form>
  
      <!-- Remind Passowrd -->
      <div id="formFooter">
        <a class="underlineHover" href="#">Forgot Password?</a>
      </div>
  
    </div>
  </div>

Login.component.ts

import  Component, OnInit  from '@angular/core';
import  FormControl, FormGroup, Validators  from '@angular/forms';
import  LoginService  from '../services/login.service';

@Component(
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
)
export class LoginComponent implements OnInit 

   loginForm:FormGroup;

  constructor(private authService: LoginService)  

  ngOnInit(): void 
    this.initForm();
  

  initForm()
    this.loginForm = new FormGroup(
      username: new FormControl("",[Validators.required]),
      password : new FormControl("",[Validators.required])
    );
  
   
  loginProces()
    if(this.loginForm.valid)
      this.authService.login(this.loginForm.value).subscribe(result=>
        if(result.success)
          console.log(result);
          alert(result.message);
        else 
          alert(result.message);
        
      )
    
  

Security.module.ts

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';

import  LoginComponent  from './login/login.component';
import  LogoutComponent  from './logout/logout.component';
import  RegisterComponent  from './register/register.component';
import  FormsModule, ReactiveFormsModule  from '@angular/forms';

 




@NgModule(
  declarations: [
     LoginComponent,
     LogoutComponent,
      RegisterComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
   
  ],
  exports:[
    
  ]
)
export class SecurityModule  

我究竟做错了什么？

路由模块

import  NgModule  from '@angular/core';
import  Routes, RouterModule  from '@angular/router';
import  LoginComponent  from './security/login/login.component';

const routes: Routes = [
  path:'login', component :  LoginComponent 
];

@NgModule(
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
)
export class AppRoutingModule  

【问题讨论】：

你使用哪个 IDE？

视觉工作室代码

你重启ng serve了吗？

是的 - 一次又一次。但现在如果我从 routing.module 中删除到 login.component 的路由，我将不再收到错误...

【参考方案1】：

可能仍在提供旧捆绑包。更改必须包含在提供的捆绑包中。重新启动服务器并检查此问题是否仍然存在。

ng serve

【讨论】：

如果我从 routing.module 中删除到 login.component 的路由我不再收到错误...看来我在这里错了。路径有什么问题？谢谢