在 html 表单中使用 ngForm 但出现错误

Question

我创建了一个名为 login 的组件并创建了一个 html 表单 login.component.html 然后我想将此表单设为 Angular 表单。所以我在 login.component.html 中添加了<form #loginform="ngForm"> 并导入

import {NgForm} from '@angular/forms' 

在 login.component.ts 中。你能帮我解决问题在哪里吗？我已经试过了

import { FormsModule }   from '@angular/forms';

但仍然无法正常工作。

所以当我运行服务器时，我收到一条错误消息：

  ERROR in src/app/login/login.component.html:2:23 - error NG8003: No directive found with exportAs 'ngForm'.
    
    2     <form #loginform="ngForm">
                            ~~~~~~
    
      src/app/login/login.component.ts:6:16
        6   templateUrl: './login.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component LoginComponent.

login.component.ts：

import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms';

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

  constructor() { }

  ngOnInit(): void {
  }

}

login.component.html：

<div class="container">
    <form #loginform="ngForm">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
      </div>
      <div class="checkbox">
        <label><input type="checkbox" name="remember"> Remember me</label>
      </div>
      <button type="submit" class="btn btn-default">Login</button>
    </form>
  </div> 

Answer 1

使用 - 从 '@angular/forms' 导入 {FormsModule, ReactiveFormsModule} 在module.ts中