模板驱动的表单方法和提交按钮不执行任何操作 Angular 7

Question

我正在按照教程学习 angular，但我偶然发现了一个我无法解决的问题。我试图将表单上的提交按钮设置为 console.log 只是为了验证提交按钮是否正常工作。单击提交按钮时，控制台没有任何响应。使用 Angular 7 CLI

register.component.ts 文件

import { Component, OnInit } from '@angular/core';
import {ValidateService} from '../../services/validate.service';
import { FormsModule } from '@angular/forms';


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

  fName: String;
  lName: String;
  username: String;
  email: String;
  password: String;

  constructor(private validateService: ValidateService) { }

  ngOnInit() {
  }

  onSubmit() {
    console.log(123);
    const user = {
      fname: this.fName,
      lname: this.lName,
      email: this.email,
      username: this.username,
      password: this.password
    };

    // Required Feilds
    if (!this.validateService.validateRegister(user.email)) {
      console.log('Please fill out everything!');
      return false;
    }

    // Validate Email
    if (!this.validateService.validateEmail(user.email)) {
      console.log('Please enter a valid Email');
      return false;
    }
  }
}

register.component.html 文件

<div class="jumbotron">
  <div class="container">
      <div class="row">
          <div class="col-md-6 offset-md-3">
              <h3>Angular 6 Template-Driven Form Validation</h3>
              <form name="form" (ngSubmit)="onSubmit()">
                  <div class="form-group">
                      <label for="fName">First Name</label>
                      <input type="text" class="form-control" name="firstName" [(ngModel)]="fName"/>
                  </div>
                  <div class="form-group">
                      <label for="lastName">Last Name</label>
                      <input type="text" class="form-control" name="lastName" [(ngModel)]="lName"/>
                  </div>
                  <div class="form-group">
                      <label for="email">Email</label>
                      <input type="text" class="form-control" name="email" [(ngModel)]="email"/>
                  </div>
                  <div class="form-group">
                      <label for="password">Username</label>
                      <input type="password" class="form-control" name="username" [(ngModel)]="username"  />
                  </div>
                  <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" name="password" [(ngModel)]="password" />
                </div>
                  <div class="form-group">
                      <button class="btn btn-primary">Register</button>
                  </div>
              </form>
          </div>
      </div>
  </div>
</div>

Answer 1

将此添加到您的按钮 type="submit" 并尝试使用 formController 和 formGroups 验证和将来需要的任何东西都会容易得多

模板驱动的表单方法和提交按钮不执行任何操作 Angular 7

Template Driven approach to form and getting no action out of submit button Angular 7

javascript

forms

angular

angular7