Angular 2
Угловые2 Пользовательские проверки

параметры

Примеры пользовательских валидаторов:

Угловой 2 имеет два вида пользовательских валидаторов. Синхронные валидаторы, как в первом примере, которые будут выполняться непосредственно на клиенте и асинхронные валидаторы (второй пример), которые вы можете использовать для вызова удаленной службы, чтобы выполнить валидацию для вас. В этом примере валидатор должен вызвать сервер, чтобы узнать, уникально ли значение.

export class CustomValidators {

static cannotContainSpace(control: Control) {
    if (control.value.indexOf(' ') >= 0)
        return { cannotContainSpace: true };

    return null;
}

static shouldBeUnique(control: Control) {
    return new Promise((resolve, reject) => {
        // Fake a remote validator.
        setTimeout(function () {
            if (control.value == "exisitingUser")
                resolve({ shouldBeUnique: true });
            else
                resolve(null);
        }, 1000);
    });
}}

Если ваше контрольное значение действительно, вы просто возвращаете null для вызывающего. В противном случае вы можете вернуть объект, который описывает ошибку.

Использование валидаторов в Formbuilder

   constructor(fb: FormBuilder) {
    this.form = fb.group({
        firstInput: ['', Validators.compose([Validators.required, CustomValidators.cannotContainSpace]), CustomValidators.shouldBeUnique],
        secondInput: ['', Validators.required]
    });
}

Здесь мы используем FormBuilder для создания очень простой формы с двумя полями ввода. FromBuilder берет массив для трех аргументов для каждого элемента управления вводом.

1. Значение по умолчанию элемента управления.
2. Валидаторы, которые будут выполняться на клиенте. Вы можете использовать Validators.compose ([arrayOfValidators]) для применения нескольких валидаторов в вашем элементе управления.
3. Один или несколько асинхронных валидаторов аналогично второму аргументу.

get / set formBuilder управляет параметрами

Существует два способа установки параметров управления formBuilder.

1. При инициализации:

exampleForm : FormGroup;
constructor(fb: FormBuilder){
  this.exampleForm = fb.group({
      name : new FormControl({value: 'default name'}, Validators.compose([Validators.required, Validators.maxLength(15)]))
   });
}

2. После инициализации:

this.exampleForm.controls['name'].setValue('default name');

Получить управляющее значение formBuilder:

let name = this.exampleForm.controls['name'].value();