CustomValidator

Defines a CustomValidator component.

The CustomValidator is a component which give you the ability to customize the validation for a given form input or for the whole form.
Add a CustomValidator component under a Form or an input component such as Text Input.
Specify whether your validation function is asynchronous or not through the Asynchronous property of your CustomValidator.
Double click on the validator to open the Typescript editor and write the required code for your validation function.
It has one parameter to allow you to access controls values:
• when validator is under a form:
g:FormGroup the form, use g.get('<control_name>').value to retrieve a control’s value
• when validator is under a control:
c:FormControl the control, use c.value to retrieve control’s value

For a synchronous validator, your validation function should return null when valid, otherwise it should return any json object filled with error informations.
For an asynchronous validator, your validation function should return a typescript Promise as below:<pre>
function validate1502270851880(c: FormControl) {
/*Begin_c8o_function:validate1502270851880*/
return new Promise(resolve => {
//Fake a slow response from server
setTimeout(() => {
if(c.value.toLowerCase() === "user"){
resolve({
"username taken": true
});
} else {
resolve(null);
}
}, 2000);
});
/*End_c8o_function:validate1502270851880*/
}</pre>
Also, you can add a Submit Button to your Form with its Auto disable property set to true to avoid form submission by disabling the button whenever form data are not valid.
For more information: Reactive form validation.