Angular form submit not submitting

Question

Please help my angular form (submit) not working. I am making a login app

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

I suggest you using angular componets for forms like ReactiveForms for example:

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>

Just remember importing import { FormsModule, ReactiveFormsModule } from '@angular/forms'; to your app.module.ts!