Angular 2
Walidacje niestandardowe Angular2

Parametry

Niestandardowe przykłady walidatora:

Angular 2 ma dwa rodzaje niestandardowych walidatorów. Synchroniczne sprawdzania poprawności, jak w pierwszym przykładzie, który będzie działał bezpośrednio na kliencie i asynchroniczne sprawdzania poprawności (drugi przykład), których można użyć do wywołania usługi zdalnej w celu wykonania sprawdzania poprawności. W tym przykładzie weryfikator powinien wywołać serwer, aby sprawdzić, czy wartość jest unikalna.

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);
    });
}}

Jeśli twoja wartość kontrolna jest prawidłowa, po prostu zwracasz null dzwoniącemu. W przeciwnym razie możesz zwrócić obiekt opisujący błąd.

Korzystanie z walidatorów w narzędziu Formbuilder

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

Tutaj używamy FormBuilder do stworzenia bardzo podstawowego formularza z dwoma polami wprowadzania danych. FromBuilder pobiera tablicę dla trzech argumentów dla każdej kontrolki wejściowej.

1. Domyślna wartość kontrolki.
2. Walidatory, które będą działać na kliencie. Możesz użyć Validators.compose ([arrayOfValidators]), aby zastosować wiele walidatorów na swojej kontrolce.
3. Jeden lub więcej walidatorów asynchronicznych w podobny sposób jak drugi argument.

get / set formBuilder kontroluje parametry

Istnieją 2 sposoby ustawienia parametrów formBuilder.

1. Po zainicjowaniu:

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

2. Po zainicjowaniu:

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

Uzyskaj wartość kontrolną formBuilder:

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