Validaciones custom con Angular 5

app.component.html

<form [formGroup]="agendaForm" (ngSubmit)="submit()">
  <input formControlName="usuario">
  <input formControlName="telefono">

  <div *ngIf="agendaForm.get('usuario').errors">
     <div *ngIf="agendaForm.get('usuario').errors['required']">
          Nombre de usuario es requerido
     </div>
  </div>

  <div *ngIf="!agendaForm.valid">
       Hay errores en el form!!!
  </div>

  <button type="submit" [disabled]="!agendaForm.valid">Enviar</button>
</form>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  agendaForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.crearForm();
  }

  crearForm() {
    this.agendaForm = this.fb.group({
      usuario: ['texto precargado', Validators.required],
      telefono: ['', Validators.compose(
                        [Validators.required,
                         this.telefonoValidator(/^[679]{1}[0-9]{8}$/)
                        ]
                      )
                ]             
    });
  }

  telefonoValidator(telefonoExp: RegExp): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} => {
      const telefono = telefonoExp.test(control.value);
      return !telefono ? {'telefonoNumber': {value: control.value}} : null;
    };
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent    

  ],

  imports: [

    BrowserModule,

    ReactiveFormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Validaciones con DataAnnotations

1. Definir los DataAnnotations en el ViewModel para cada atributo que se quiera validar:

[Required(ErrorMessage = "Ingrese el nombre")]
public string Nombre { get; set; }

2. Agregar la verificación en el Action:

public ActionResult Guardar(PersonaViewModel persona)

{

   if (ModelState.IsValid)

   {

      ...

      return View();

   } else

   {

      ViewBag.Mensaje = "Error en los datos ingresados, debe completar los campos requeridos";

      return View("Error");

   }

}

*** El objeto ModelState contiene toda la información de los errores ocurridos, en ModelState.Values

*** Solo con esto, ya queda funcionando la validación del lado del servidor.
*** Para que la validación se haga también del lado del cliente, se debe agregar lo siguiente:

1. Agregar los siguientes scripts:

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

2. Agregar los ValidationMessages para cada atributo:

<div class="field-validation-error">@Html.ValidationMessageFor(m => m[i].Path)</div>

@Html.TextBoxFor(m => m[i].Path)

3. También se puede agregar el ValidationSummary, que sirve para mostrar un resumen de todos los campos con error. Esto en general se agrega al final de la página:

<div class="validation-summary-errors">

    @Html.ValidationSummary()

</div>

*** Tener en cuenta que el comportamiento de las validaciones en IE a veces es diferente a Chrome ***