Angular 2
Angular2 Custom Validations

parameters

Voorbeelden van aangepaste validators:

Angular 2 heeft twee soorten aangepaste validators. Synchrone validators zoals in het eerste voorbeeld die rechtstreeks op de client worden uitgevoerd en asynchrone validators (het tweede voorbeeld) die u kunt gebruiken om een externe service te bellen om de validatie voor u te doen. In dit voorbeeld moet de validator de server bellen om te zien of een waarde uniek is.

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

Als uw besturingswaarde geldig is, keert u eenvoudig null terug naar de beller. Anders kunt u een object retourneren dat de fout beschrijft.

Validators gebruiken in de Formbuilder

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

Hier gebruiken we de FormBuilder om een zeer eenvoudig formulier met twee invoervakken te maken. De FromBuilder neemt een array voor drie argumenten voor elk invoerbesturingselement.

1. De standaardwaarde van het besturingselement.
2. De validators die op de client worden uitgevoerd. U kunt Validators.compose ([arrayOfValidators]) gebruiken om meerdere validators op uw besturing toe te passen.
3. Een of meer async-validators op dezelfde manier als het tweede argument.

get / set formBuilder regelt parameters

Er zijn 2 manieren om besturingselementen van formBuilder in te stellen.

1. Bij initialisatie:

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

2. Na initialiseren:

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

Get formBuilder-besturingswaarde:

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