--- title: Custom Form Validation Using an Event product: Form Library description: Learn how to add custom validation to any input field of a form to ensure submitted data matches the requirements set out. View this free demo for JavaScript. framework: Angular source: https://surveyjs.io/form-library/examples/add-custom-input-validation/angular index: https://surveyjs.io/form-library/examples/overview.md --- # Custom Form Validation Using an Event (Angular) Custom JavaScript validation for forms allows you to create more specific input validation logic than [built-in validators](https://surveyjs.io/form-library/examples/javascript-form-validation/). In SurveyJS Form Library, you can add custom validation in two ways—with the [`onValidateQuestion`](https://surveyjs.io/form-library/documentation/surveymodel#onValidateQuestion) event or expressions. This example demonstrates how to handle the event. Switch between React, Vue, jQuery, Angular, and Vanilla JS to view the example for your JavaScript framework/library. ## Event Handler vs Expressions ### Event Handler To create custom form validation in JavaScript with the `onValidateQuestion` event, you need to implement a corresponding event handler. Users have no access to this handler and therefore _cannot_ disable custom validation. ### Expressions For custom validation with expressions, you need to implement and register a custom validator in your JavaScript code to make the validator available within expressions. Users cannot modify the validator, but they can decide whether or not to use it in their expressions when they design their surveys and thus enable or disable custom validation. Refer to the following demo for more information: [Custom Form Validation Using Expressions](https://surveyjs.io/form-library/examples/add-custom-survey-data-validation/). ## Handle the `onValidateQuestion` Event An `onValidateQuestion` event handler accepts the survey as the first argument and an object with the following fields as the second argument: - `question` - The question being validated. - `name` - The question's name. - `value` - A question value being validated. - `error` - An error message that you should specify if validation fails. In this custom form validation example, the form field accepts only e-mail addresses hosted at `surveyjs.io`. A callback attached to the `onValidateQuestion` event handler validates the entered e-mail address and assigns an error message to the `options.error` field if the address is invalid. The `onValidateQuestion` event may occur and run validation at different points in your application, depending on the [`checkErrorsMode`](https://surveyjs.io/form-library/documentation/surveymodel#checkErrorsMode) property. In this demo, the event occurs immediately after you change the form field value because `checkErrorsMode` is set to `"onValueChanged"`. If you do not set this property, validation activates before a user proceeds to the next page or completes the survey. ## Files ### `src/app/components/json.ts` ```ts export const json = { "checkErrorsMode": "onValueChanged", "elements": [ { "type": "text", "name": "email", "isRequired": true, "title": "Enter your work e-mail address" } ] }; ``` ### `src/app/components/survey.component.css` ```css /* You can add your custom CSS here. */ ``` ### `src/app/components/survey.component.html` ```html ``` ### `src/app/components/survey.component.ts` ```ts import { Component, OnInit } from "@angular/core"; import { Model } from "survey-core"; import { json } from "./json"; import "./survey.component.css"; import "survey-core/survey-core.min.css"; function validateDomain(_, options) { if (options.name === "email") { const email = options.value; if (!email) return; const domain = email.trim().substring(email.indexOf("@") + 1); if (domain !== "surveyjs.io") { options.error = "Please enter an e-mail address hosted at surveyjs.io."; } } } @Component({ // tslint:disable-next-line:component-selector selector: "component-survey", templateUrl: "./survey.component.html", styleUrls: ["./survey.component.css"] }) export class SurveyComponent implements OnInit { model: Model; ngOnInit() { const survey = new Model(json); survey.onValidateQuestion.add(validateDomain); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); this.model = survey; } } ``` ### `src/app/components/theme.ts` ```ts export const themeJson = {}; ``` ### `src/app/app.component.css` ```css ``` ### `src/app/app.component.html` ```html ``` ### `src/app/app.component.ts` ```ts import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { title = "CodeSandbox"; } ``` ### `src/app/app.module.ts` ```ts import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { AppComponent } from "./app.component"; import { SurveyModule } from "survey-angular-ui"; import { SurveyComponent } from "./components/survey.component"; @NgModule({ declarations: [AppComponent, SurveyComponent], imports: [BrowserModule, SurveyModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` ### `src/environments/environment.prod.ts` ```ts export const environment = { production: true }; ``` ### `src/environments/environment.ts` ```ts // The file contents for the current environment will overwrite these during build. // The build system defaults to the dev environment which uses `environment.ts`, but if you do // `ng build --env=prod` then `environment.prod.ts` will be used instead. // The list of which env maps to which file can be found in `.angular-cli.json`. export const environment = { production: false }; ``` ### `src/index.html` ```html ``` ### `src/main.ts` ```ts import { enableProdMode } from "@angular/core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { AppModule } from "./app/app.module"; import { environment } from "./environments/environment"; if (environment.production) { enableProdMode(); } platformBrowserDynamic() .bootstrapModule(AppModule) .catch(err => console.log(err)); ``` ### `src/polyfills.ts` ```ts /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. * 2. Application imports. Files imported after ZoneJS that should be loaded before your main * file. * * The current setup is for so-called "evergreen" browsers; the last versions of browsers that * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. * * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html */ /*************************************************************************************************** * BROWSER POLYFILLS */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/ // import 'core-js/es6/symbol'; // import 'core-js/es6/object'; // import 'core-js/es6/function'; // import 'core-js/es6/parse-int'; // import 'core-js/es6/parse-float'; // import 'core-js/es6/number'; // import 'core-js/es6/math'; // import 'core-js/es6/string'; // import 'core-js/es6/date'; // import 'core-js/es6/array'; // import 'core-js/es6/regexp'; // import 'core-js/es6/map'; // import 'core-js/es6/weak-map'; // import 'core-js/es6/set'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ // import 'classlist.js'; // Run `npm install classlist.js`. /** IE10 and IE11 requires the following for the Reflect API. */ // import 'core-js/es6/reflect'; /** Evergreen browsers require these. **/ // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. import "core-js/proposals/reflect-metadata"; /** * Required to support Web Animations `@angular/platform-browser/animations`. * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation **/ // import 'web-animations-js'; // Run `npm install web-animations-js`. /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ import "zone.js/dist/zone"; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ ``` ### `src/styles.css` ```css /* You can add your custom CSS here. */ ``` ### `src/typings.d.ts` ```ts /* SystemJS module definition */ declare var module: NodeModule; interface NodeModule { id: string; } ``` ### `.angular-cli.json` ```json { "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "prefix": "app", "styles": [ "styles.css" ], "scripts": [ ], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ] } ``` ### `_tsconfig.json` ```json { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "allowSyntheticDefaultImports": true, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "resolveJsonModule": true, "target": "es2015", "module": "es2020", "lib": [ "es2018", "dom" ] } } ``` ### `package.json` ```json { "name": "surveyjs-angular", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "14.1.1", "@angular/cdk": "14.1.1", "@angular/common": "14.1.1", "@angular/compiler": "14.1.1", "@angular/core": "14.1.1", "@angular/forms": "14.1.1", "@angular/platform-browser": "14.1.1", "@angular/platform-browser-dynamic": "14.1.1", "@angular/router": "14.1.1", "core-js": "3.6.4", "rxjs": "6.5.4", "survey-core": "latest", "survey-angular-ui": "latest", "tslib": "1.13.0", "zone.js": "0.11.7" }, "devDependencies": { "@angular/cli": "1.6.6", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/core-js": "0.9.46", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "3.9.7" }, "keywords": [ "angular", "surveyjs" ], "description": "SurveyJS-Angular example project" } ``` ## Other Frameworks - [React](https://surveyjs.io/form-library/examples/add-custom-input-validation/reactjs.md) - [Vue 3](https://surveyjs.io/form-library/examples/add-custom-input-validation/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/add-custom-input-validation/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/add-custom-input-validation/vanillajs.md)