=====Создание валидатора=====

Для создания валидатора можно в компоненте создать обычный метод и передать туда параметр с типом FormControl

<code javascript>
  checkForLength(control: FormControl){
    console.log(control);
    if(control.value.length <= this.charLength && control.value.length > 0){
      return {
        'lengthError': true
      }
    }
    return null;
  }
</code>

В данном случае валидатор будет вычислять количество минимальных символов.\\
\\
Далее метод надо передать в массив валидаторов FormControl

<code javascript>
pass: new FormControl('', [Validators.required, this.checkForLength.bind(this)]),
</code>
для того чтобы не потерять this.charLength, переменная в которой задается минимальное колличество символов, нужно при инициализации валидатора биндить this\\
\\
чтобы отобразить ошибки нужно обратится к контроллу подобным образом
<code javascript>
      <input  type="password" class="form-control" formControlName="pass">
        <p class="help-block" *ngIf="form.get('user.pass').invalid && form.get('user.pass').touched && form.get('user.pass').errors['required']">пароль не должен быть пустым!</p>
        <p class="help-block" *ngIf="form.get('user.pass').invalid && form.get('user.pass').touched && form.get('user.pass').errors['lengthError']">пароль не должен быть меньше {{charLength}} символов!</p>
</code>


В конечном итоге мы получим что то вроде этого\\
\\
<code javascript>
import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

  answers = [{
    type: 'yes',
    text: 'Да'
  }, {
    type: 'no',
    text: 'Нет'
  }];

  form: any;
  charLength:number = 4;

  ngOnInit() {
    this.form = new FormGroup(
      {
        user: new FormGroup({
          email: new FormControl('anchikin@mail.ru', [Validators.email, Validators.required]),
          pass: new FormControl('', [Validators.required, this.checkForLength.bind(this)]),
        }),
        country: new FormControl('ru'),
        answer: new FormControl('no')
      }
    );
  }

  checkForLength(control: FormControl){
    console.log(control);
    if(control.value.length <= this.charLength && control.value.length > 0){
      return {
        'lengthError': true
      }
    }
    return null;
  }

  onSubmit() {
    console.log('Submited!', this.form);
  }
}

</code>

<code javascript>
<div class="col-xs-8 col-xs-offset-2">
  <form [formGroup]="form" (ngSubmit)="onSubmit()">

    <div formGroupName="user">
      <div class="form-group" [ngClass]="{'has-error': form.get('user.email').invalid && form.get('user.email').touched}">
        <label>Email</label>
        <input type="text" class="form-control"  formControlName="email">
        <p class="help-block" *ngIf="form.get('user.email').invalid && form.get('user.email').touched">Не правильно прописан email</p>
      </div>
      <div class="form-group" [ngClass]="{'has-error': form.get('user.pass').invalid && form.get('user.pass').touched}">
        <label>Пароль</label>
        <input  type="password" class="form-control" formControlName="pass">
        <p class="help-block" *ngIf="form.get('user.pass').invalid && form.get('user.pass').touched && form.get('user.pass').errors['required']">пароль не должен быть пустым!</p>
        <p class="help-block" *ngIf="form.get('user.pass').invalid && form.get('user.pass').touched && form.get('user.pass').errors['lengthError']">пароль не должен быть меньше {{charLength}} символов!</p>
      </div>
    </div>

    <div class="form-group">
      <label>Выберите страну</label>
      <select class="form-control" formControlName="country">
        <option value="ru">Россия</option>
        <option value="by">Белоруссия</option>
        <option value="ua">Украина</option>
      </select>
    </div>
    <div class="radio" *ngFor="let ans of answers">
      <label>
        <input
          type="radio"
          name="answer"
          formControlName="answer"
          [value]="ans.type"
        > {{ans.text}}
      </label>
    </div>
    <button [disabled]="form.invalid" class="btn btn-success" type="submit">Сохранить</button>
  </form>
</div>
</code>

{{ :angular:angular2:forms:screen7.png |}}