Angular 表单提交不起作用

Question

请帮助我的 Angular 形式(提交)不起作用。我正在制作一个登录应用程序，我也是 Angular 的初学者。请帮我找出问题。

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 这样的表单使用 Angular 组件:

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 中!