loginForm

src/app/app.component.css

@@ -1,5 +1,5 @@
 
->>> body {
+body {
     margin: 0;
 }
 

src/app/login/login.component.html

@@ -1,27 +1,18 @@
 <mat-card class="login-page">
   <mat-card-title>Login</mat-card-title>
   <mat-card-content>
-
-    <form class="login-form data-form">
-
+    <form class="login-form data-form" #loginForm="ngForm">
       <mat-form-field>
-
-        <input matInput type="email" name="email"
-               placeholder="Email">
-
+        <input matInput type="email" name="email" placeholder="Email" />
       </mat-form-field>
 
       <mat-form-field>
-
-        <input matInput type="password" placeholder="Password">
-
+        <input matInput type="password" placeholder="Password" />
       </mat-form-field>
 
-      <button mat-raised-button color="primary">
+      <button mat-raised-button color="primary" (click)="login(loginForm)">
         Login
       </button>
-
     </form>
-
   </mat-card-content>
 </mat-card>

src/app/login/login.component.ts

@@ -1,21 +1,16 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component, OnInit } from "@angular/core";
+import { NgForm } from "@angular/forms";
 
 @Component({
-  selector: 'login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.css']
+  selector: "login",
+  templateUrl: "./login.component.html",
+  styleUrls: ["./login.component.css"],
 })
 export class LoginComponent implements OnInit {
+  constructor() {}
 
-
-  constructor() {
-
-
+  ngOnInit() {}
+  login(loginForm: NgForm) {
+    console.log(loginForm.value, loginForm.valid);
   }
-
-  ngOnInit() {
-
-  }
-
 }