如何将html表单制作成角形

Question

我创建了一个名为 login 的组件。我创建了一个 html 表单 login.component.html 然后我想将此表单设置为 Angular 表单。所以我在 login.component.html 中添加了<form #loginform="ngForm">，并在 login.component.ts 中导入了import {NgForm} 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

也许如果你将 FormsModule 添加到你的模块中，你的问题就会得到解决，或者你可以通过命令 ng g c login 创建登录组件

Answer 2

不要使用 ngForm。使用 Angular 响应式表单更好、更容易创建和管理。

https://angular.io/guide/reactive-forms

但如果您想继续当前设置，请查看此答案

TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"