Cacher is the code snippet organizer for pro developers

#########################COMPONENT TYPESCRIPT:
import { Component, OnInit } from '@angular/core';
import { Client } from '../../models/Client';

@Component({
  selector: 'app-add-client',
  templateUrl: './add-client.component.html',
  styleUrls: ['./add-client.component.css']
})
export class AddClientComponent implements OnInit {
  //VARIABLES DEL MODELO CLIENT, SE INICIALIZA EN '' PARA EL DATABINDING
  client: Client = {
    firstName:'',
    lastName:'',
    email: '',
    phone: '',
    balance:0
  }

  disableBalanceOnAdd: boolean = true;

  constructor() { }

  ngOnInit() {
  }

}


########################HTML

Quitamos la validacion por defecto del navegador con "novalidate"
<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
      <div class="form-group">
        <label for="firstName">First Name</label>
        <input 
          type="text"
          class="form-control"
          [ngClass]="{'is-invalid':clientFirstName.errors?.required && clientFirstName.touched || clientFirstName.errors?.minlength}"
          //DATA BINDING
          [(ngModel)]="client.firstName"
          //NAME NECESARIO PARA EL DATA BINDING
          name="firstName"
          //IDENTIFICADOR PARA LAS VALIDACIONS
          #clientFirstName = "ngModel"
          //TIPO DE VALIDACIONES
          minlength="2"
          required
        >
        //BOOTSTRAP DIV'S PARA MOSTRAR LOS ERRORES
        <div *ngIf="clientFirstName.errors?.required && clientFirstName.touched" class="invalid-feedback">
          First name is required
        </div>
        <div *ngIf="clientFirstName.errors?.minlength && clientFirstName.touched" class="invalid-feedback">
          Must be at least 2 characters
        </div>
      </div>

      <div class="form-group">
        <label for="lastName">Last Name</label>
        <input 
          type="text"
          class="form-control"
          [ngClass]="{'is-invalid':clientLastName.errors?.required && clientLastName.touched || clientLastName.errors?.minlength}"
          [(ngModel)]="client.lastName"
          name="lastName"
          #clientLastName = "ngModel"
          minlength="2"
          required
        >
        <div *ngIf="clientLastName.errors?.required && clientLastName.touched" class="invalid-feedback">
          Last name is required
        </div>
        <div *ngIf="clientLastName.errors?.minlength && clientLastName.touched" class="invalid-feedback">
          Must be at least 2 characters
        </div>
      </div>
      
      //VALIDACION DE EMAIL:
      <div class="form-group">
        <label for="email">Email</label>
        <input 
          type="email"
          class="form-control"
          [ngClass]="{'is-invalid':clientEmail.errors?.required && clientEmail.touched || clientEmail.errors?.pattern}"
          [(ngModel)]="client.email"
          name="email"
          #clientEmail ="ngModel"
          required
          //EXPRESION REGULAR
          pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
        >
        <div *ngIf="clientEmail.errors?.required && clientEmail.touched" class="invalid-feedback">
          Email is required
        </div>
        //IF PARA VERIFICAR EL PATTERN
        <div *ngIf="clientEmail.errors?.pattern && clientEmail.touched" class="invalid-feedback">
          Email is invalid
        </div>
      </div>

      <div class="form-group">
        <label for="phone">Phone</label>
        <input 
          type="text"
          class="form-control"
          [ngClass]="{'is-invalid':clientPhone.errors?.required && clientPhone.touched || clientPhone.errors?.minlength}"
          [(ngModel)]="client.phone"
          name="phone"
          #clientPhone = "ngModel"
          minlength="10"
          required
        >
        <div *ngIf="clientPhone.errors?.required && clientPhone.touched" class="invalid-feedback">
          Phone is required
        </div>
        <div *ngIf="clientPhone.errors?.minlength && clientPhone.touched" class="invalid-feedback">
          Phone is not a valid number
        </div>
      </div>

      <div class="form-group">
        <label for="balance">Balance</label>
        <input 
          type="text"
          class="form-control"
          [(ngModel)]="client.balance"
          name="balance"
          #clientBalance = "ngModel"
          //DEPENDE DE LA VARIABLE disableBalanceOnAdd
          [disabled]="disableBalanceOnAdd"
        >
      </div>

      <input type="submit" value="Submit" class="btn btn-primary btn-block">
    </form>