The built-in Kinvey Studio components come with a number of input validations, but you can also add your own. You can also alter the behavior of default validators.


The following example operates on a my-view Blank-type view that has the vehicles collection added as a Data Service. The view houses a Form component with a TextField bound to the vehicle's make field.


The example's my-view.component.tns.ts file edits do the following to enhance the input validation on the make field:


  • Marks the field as required
  • Sets a maximum required value length of 3 characters
  • Sets a minimum required value length of 1 characters
  • Specifies allowed characters through the regular expression \w+ (allowing a-z, A-Z, 0-9, and the underscore (_) character)
  • Set a new message for the default validator that checks for an empty value
  • Create a new validator that prohibits upper case letters


import { Inject, Injector } from '@angular/core';
import { MyViewViewBaseComponent } from '@src/app/modules/mymod/my-view/my-view.base.component';
import { Validators } from '@angular/forms';

export class MyViewViewComponent extends MyViewViewBaseComponent {
    constructor(@Inject(Injector) injector: Injector) {
        super(injector);

        const { validators: makeValidators } = this.config.mobileform0.groups.vehicleFormGroup.make;

        makeValidators.push(Validators.required);
        makeValidators.push(Validators.maxLength(3));
        makeValidators.push(Validators.minLength(1));
        makeValidators.push(Validators.pattern('\\w+'));

        // custom message for default validators
        this.config.mobileform0.validationMessages.required = 'The (${fieldName}) field cannot be empty.';

        // custom validator
        this.config.mobileform0.validationMessages['capsForbidden'] = '"${fieldValue}" contains upper case! Should be "${alternative}"!';
        makeValidators.push((control) => {
            const containsUppercase = /[A-Z]/.test(control.value);
            return !containsUppercase ? null : {
                'capsForbidden': { alternative: control.value.toLowerCase() }
            };
        });
    }
}