uno-de-piera

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

uno-de-piera

<form [formGroup]="loginForm" (ngSubmit)="submit()" novalidate>
  <div class="form-group">
    <label class="center-block">Email:
      <input class="form-control" formControlName="email">
    </label>

    <div *ngIf="loginForm.get('email').errors" class="alert alert-danger">
      <div *ngIf="loginForm.get('email').errors['required']">
        Email requerido
      </div>

uno-de-piera

import { LoginComponent } from './login/login.component';
import {AuthRoutingModule} from './auth-routing.module';
import {ReactiveFormsModule} from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    AuthRoutingModule,
    ReactiveFormsModule
  ],

uno-de-piera

import {AbstractControl, ValidatorFn} from '@angular/forms';

export function phoneValidator(phoneExp: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const phone = phoneExp.test(control.value);
    return !phone ? {'phoneNumber': {value: control.value}} : null;
  };
}

uno-de-piera

<div class="form-group">
  <label class="center-block">Teléfono:
    <input type="text" class="form-control" formControlName="phone">
  </label>

  <div *ngIf="loginForm.get('phone').errors" class="alert alert-danger">
    <div *ngIf="loginForm.get('phone').errors['required']">
      Teléfono requerido
    </div>
    <div *ngIf="loginForm.get('phone').errors['phoneNumber']">

uno-de-piera

this.loginForm = this.fb.group({
  email: ['', Validators.compose([Validators.required, Validators.email]) ],
  password: ['', Validators.compose([Validators.required, Validators.minLength(6)]) ],
  phone: ['', Validators.compose(
    [
      Validators.required,
      phoneValidator(/^[679]{1}[0-9]{8}$/),
    ]
  )]
});

uno-de-piera

phone: ['', Validators.compose(
  [
    Validators.required,
    Validators.pattern(/^[679]{1}[0-9]{8}$/)
  ]
)]

uno-de-piera

import { Injectable } from '@angular/core';
import {Observable} from "rxjs/Observable";

@Injectable()
export class AppService {

  loading$: Observable<boolean> = Observable.of(false);

  constructor() { }

uno-de-piera

<mat-spinner *ngIf="appService.loading$ | async"></mat-spinner>
<router-outlet *ngIf="(appService.loading$ | async) == false"></router-outlet>

uno-de-piera

<?php 

Route::post('login', function() {
	$validator = \Validator::make(request()->all(), [
		'email' => 'required',
		'password' => 'required'
	]);
	if ($validator->fails()) {
		//mostrar errores, o en json o lo que necesites
	}