import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'app-login-form',
    template: `
    <form [formGroup]="loginForm" (ngSubmit)="submit()">
      <input type="text" formControlName="username">
      <input type="password" formControlName="password">
      <button [disabled]="loginForm.invalid">Login</button>
    </form>
  `
})
export class LoginComponent implements OnInit {
  loginForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      username: ['', [Validators.required, Validators.minLength(2)]],
      password: ['', [Validators.required, Validators.minLength(4)]],
    });
    this.loginForm.valueChanges.subscribe(data => console.log(data));
  }

  submit() {
    console.log(this.loginForm.value);
  }
}