Шаблон Управляемый подход к форме и отсутствие действий от кнопки отправки Angular 7

Question

Я продолжаю учебник по изучению углов, и я наткнулся на проблему, которую не могу решить.Я пытаюсь получить кнопку отправки в форме просто 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. С валидацией было бы намного проще, и все, что потребуется в будущем