Angular: small component to manipulate data from a login form.

login-form.component.ts

/* 
  Imports 
*/
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { LoginModel } from '../../models/login.model';
import { FormErrorModel } from '../../models/form-error.model';

/*
  Template definition
  - The catchSubmit() function is binded on the (submit) event of the <form>
  - The formData object is binded in every <input> with [(ngModel)] => need to add FormsModule in the module
  - Every <span> in <label> can display a message thanks to the definition of formError object
  - Every <input> bind the (focus) event to change the value of formError and hide the error message

  Directives definition
  - The (submit) directive allow to bind submit event on a form ( vue => ctrl )
  - The (focus) directive allow to bind focus event on any HTML tag ( vue => ctrl )
  - The [innerHTML] directive allow a one way data binding ( ctrl => vue )
  - The [(ngModel)] directive allow a two way data binding ( ctrl <=> vue )
*/
@Component({
  selector: 'module-login-form',
  template:`
    <form (submit)="catchSubmit()">
      <label for="email">Email <span *ngIf="formError.email.error" [innerHTML]="formError.email.message"></span></label>
      <input type="email" name="email" [(ngModel)]="formData.email" (focus)="formError.email.error = false">

      <label for="password">Password <span *ngIf="formError.password.error" [innerHTML]="formError.password.message"></span></label>
      <input type="password" name="password" [(ngModel)]="formData.password" (focus)="formError.password.error = false">

      <button type="submit">Login</button>
    </form>
  `
})


/* 
  Export Class 
*/
export class LoginFormComponent implements OnInit {

  // Create new event to send data to main component
  @Output() sendformData = new EventEmitter;

  // Instantiate variables
  public formData: LoginModel = undefined;
  public formError: FormErrorModel = undefined;

  // Use the constructor to add needed values
  constructor() {
    this.formData = { 
      email: undefined, 
      password: undefined,
    };

    this.formError = { 
      email: {
        error: false,
        message: undefined
      },
      password: {
        error: false,
        message: undefined
      }
    };
  };

  // Catch the submit form event
  public catchSubmit = () => {
    // Check email
    if( this.formData.email === undefined || this.formData.email.length == 0 ) { 
      this.formError.email.error = true; 
      this.formError.email.message = `Email is needed`; 
    };

    // Check password
    if( this.formData.password === undefined || this.formData.password.length == 0 ) { 
      this.formError.password.error = true; 
      this.formError.password.message = `Password is needed`; 
    };
    
    // Emit sendformData event when form is validated
    if( this.formError.email.error === false && this.formError.password.error === false ) this.sendformData.emit(this.formData);
  };

  // OnInit is not used in this compoenent
  ngOnInit() {};
};