Question

请帮助我的角度形式（提交）不起作用。我正在制作一个登录应用程序，并且我还是angel的初学者。请帮助我找到问题。

login.component.html

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

login.component.ts

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) {
    event.preventDefault()
      Console.log(event)
  }

}

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

您可以试试吗？请使用ngSubmit代替（submit）。

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

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

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

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

Answer 3

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>

//最好具有语义，并使用按钮代替输入类型=“ 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>

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

Answer 4

在输入中没有 name属性的情况下，角形形式将不起作用。您可以按以下方式更改代码。

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

但是，这不是特定于angular的，而是通常针对HTML的。 see MDN description for name attribute

您还需要确保将FormsModule导入了您的angular模块（很可能是app.module.ts）。

Angular包含两种管理表单的方法-FormsModule和ReactiveFormsModule。 FormsModule是两者中较容易的，但没有提供太多控制权。 ReactiveFormsModule有点复杂，但是提供了很多控制。对于您的情况，FormsModule看起来足够好。

另外，创建按钮更语义的方法是使用<button type="submit>"标签而不是<input type="submit">。

角形式提交不醒

4 个答案: