如何将html表单制作成角形

Posted 2023-03-13

【中文标题】如何将html表单制作成角形

【英文标题】：How to make a html form to angular form

【发布时间】：2021-01-01 16:29:40

【问题描述】：

我创建了一个名为 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> 

【问题讨论】：

dev.to/jwp/angular-10-ngmodel-and-formcontrols-e0g

【参考方案1】：

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

【参考方案2】：

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

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

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

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

【讨论】：

我从 '@angular/forms' 导入了这个 import FormsModule ；但仍然是同样的错误。你知道怎么解决吗？