Step 1: Create a component like login.component.html

<h1>Login</h1>
<hr>
<div class="col-md-4">
  <form #loginForm="ngForm" (ngSubmit)="login(loginForm.value)" autocomplete="off">
    <div class="form-group" >
      <label for="userName">User Name:</label>
      <input (ngModel)="userName" name="userName" id="userName" type="text" class="form-control" placeholder="User Name..." />
    </div>
    <div class="form-group" >
      <label for="password">Password:</label>
      <input (ngModel)="password" name="password" id="password" type="password" class="form-control"placeholder="Password..." />
    </div>
        
    <button type="submit" class="btn btn-primary">Login</button>
    <button type="button" class="btn btn-default">Cancel</button>
  </form>
</div>
<!-- {{loginForm.value | json}} -->

Step 2: login.component.ts

import { Component } from '@angular/core'

@Component({
    templateUrl: './login.component.html'
})

export class LoginComponent{

    userName
    password
    
    login(formValues){
        console.log(formValues)
    }

}