Angular 2
Validazioni personalizzate Angular2

Parametri

Esempi di validatori personalizzati:

Angular 2 ha due tipi di validatori personalizzati. Validatori sincroni come nel primo esempio che verrà eseguito direttamente sul client e sui validatori asincroni (il secondo esempio) che è possibile utilizzare per chiamare un servizio remoto per eseguire la convalida. In questo esempio il validatore dovrebbe chiamare il server per vedere se un valore è univoco.

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

Se il tuo valore di controllo è valido, devi semplicemente restituire null al chiamante. Altrimenti puoi restituire un oggetto che descrive l'errore.

Utilizzo dei validatori nel Formbuilder

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

Qui usiamo FormBuilder per creare un modulo molto semplice con due caselle di input. FromBuilder acquisisce un array per tre argomenti per ciascun controllo di input.

1. Il valore predefinito del controllo.
2. I validatori che verranno eseguiti sul client. È possibile utilizzare Validators.compose ([arrayOfValidators]) per applicare più validatori sul proprio controllo.
3. Uno o più validatori asincroni in modo simile al secondo argomento.

get / set formBuilder controlla i parametri

Ci sono 2 modi per impostare i parametri dei controlli formBuilder.

1. All'inizializzazione:

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

2. Dopo l'inizializzazione:

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

Ottieni il valore di controllo del formBuilder:

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