角度表单提交未提交

Answer 1

我建议您对 ReactiveForms 等表单使用角度组件：

import { FormGroup, FormControl, Validators } from '@angular/forms';

  public loginForm: FormGroup;

  constructor() {
    this.loginForm = new FormGroup({
      'username': new FormControl('', [
        Validators.required
      ]),
      'password': new FormControl('', [
        Validators.required
      ])
    });
  }

  public sendLogin(): void {
    console.log(loginForm.value);
  }

<form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && sendLogin()">
  <input formControlName="username" type="text" placeholder="Enter Username">
  <input formControlName="password" type="password" placeholder="Enter Password">
  <input type="submit" value="Submit">
</form>

请记住将

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

导入到您的 app.module.ts！

Answer 2

您需要做两件事才能工作。 1. 如果输入中没有 name 属性，Angular 表单将无法工作。 您可以按如下方式更改代码。

<input type="text" name="username" placeholder="Enter Username">

然而，这并不特定于 Angular，而是一般的 HTML。 名称属性请参阅 MDN 描述

2. 您还需要确保

   FormsModule

   已导入到您的角度模块中（最有可能是

   app.module.ts

   ）。然后在表单标签中

Angular 包含 2 种管理表单的方法 -

FormsModule

和

ReactiveFormsModule

。

FormsModule

是两者中更容易的一个，但不能提供很多控制。

ReactiveFormsModule

有点复杂，但提供了很多控制。 对于你的情况

FormsModule

看起来已经足够好了。

此外，创建按钮的更语义化的方式是使用

<button type="submit>"

标签而不是

<input type="submit">

。

Answer 3

你能试试这个吗？请使用 ngSubmit 而不是使用 (submit)。

<form (ngSubmit)="loginUser($event)">

您可能需要在此处添加分号来美化您的代码

 event.preventDefault();
  Console.log(event);

这里有一些参考： https://angular.io/guide/forms

Answer 4

Angular 在我们的应用程序中主要提供两种不同的构建表单的方式。他们是 ： 1. 模板驱动方法，允许使用更少的 cpde 构建表单 2. 使用低级 API 的响应式方法，使我们的表单无需 DOM 即可测试。我们还可以使用 FormBuilder，它是一个高级 API，我们可以通过 Angular 访问。

如果你想使用模板驱动的方法。您需要首先在 app.module.ts 文件中导入 FormsModule。在文件中添加以下语句： 从'@angular/forms'导入{FormsModule}； 并在您的 @NgModule 指令中添加 FormsModule；

  @NgModule({ 
    imports:[
        //other imports
        FormsModule
        ],
    })

然后在您的登录模板中，您需要进行更改，代码应如下所示：

<form (ngSubmit)="loginUser($event)">
  <input type="text" placeholder="Enter Username" id="username">
  <input type="password" placeholder="Enter Password" id="password">
  <button type="submit">Submit</button>
<form>

// 语义化并使用按钮而不是输入 type = "submit" 是件好事

并在login.component.ts中删除event.preventDefault()。而且，console.log 的语法带有小写“c”。所以，代码看起来像这样：

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

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

export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  loginUser(event) {
      console.log(event);
  }
}

//您不需要添加 event.preventDefault()，因为您不会被重定向到任何新 URL。

现在您可以在控制台中看到您的事件正在被记录。

如果您想尝试反应式方法（也称为模型驱动）。您将需要导入 ReactiveFormsModule。因此，将以下代码片段添加到 app.mopdule.ts

import { ReactiveFormsModule } from '@angular/forms'

@NgModule({
    imports:[
    //other imports
    ReactiveFormsModule
    ],
})

请记住，响应式方法意味着您需要事先对表单进行建模并在模板中实现。 所以，在你的login.component.ts中。您将需要导入 FormControl 来设置表单的初始值。您的 login.component.ts 文件将如下所示：

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

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

  loginForm = new FormGroup({
  username: new FormControl(''),
  password: new FormControl('')
  });

  constructor() { }

  ngOnInit() {
  }

  loginUser() {
      console.log(this.loginForm.value);
  }

}

现在，将您的 login.component.html 文件更改为以下内容：

<form [formGroup]="loginForm" (ngSubmit)="loginUser()">
  <input type="text" placeholder="Enter Username" formControlName="username">
  <input type="password" placeholder="Enter Password" formControlName="password">
  <button type="submit">Submit</button>
</form>

现在您可以看到控制台来查看正在存储的值。