Angular 2
Angular2 Validations personnalisées

Paramètres

Exemples de validateurs personnalisés:

Angular 2 dispose de deux types de validateurs personnalisés. Les validateurs synchrones, comme dans le premier exemple, qui s'exécuteront directement sur les validateurs client et asynchrone (le deuxième exemple), que vous pouvez utiliser pour appeler un service distant afin d'effectuer la validation pour vous. Dans cet exemple, le validateur doit appeler le serveur pour voir si une valeur est unique.

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

Si votre valeur de contrôle est valide, vous retournez simplement null à l'appelant. Sinon, vous pouvez retourner un objet qui décrit l'erreur.

Utiliser des validateurs dans le Formbuilder

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

Ici, nous utilisons le FormBuilder pour créer une forme très simple avec deux zones de saisie. FromBuilder prend un tableau pour trois arguments pour chaque contrôle d'entrée.

1. La valeur par défaut du contrôle.
2. Les validateurs qui s'exécuteront sur le client. Vous pouvez utiliser Validators.compose ([arrayOfValidators]) pour appliquer plusieurs validateurs sur votre contrôle.
3. Un ou plusieurs validateurs asynchrones de la même manière que le second argument.

get / set Les paramètres de contrôles formBuilder

Il existe deux manières de définir les paramètres des contrôles formBuilder.

1. À l'initialisation:

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

2. Après initialisation:

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

Obtenir la valeur du contrôle formBuilder:

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