How to Create an Angular Reactive Form Control Validator to Check for Valid XML

Creating a Reactive Form Control Validator to check if a field is valid XML is actually pretty easy thanks to the DOMParser class. In this blog, I will provide a step-by-step guide on how to create an Angular Reactive Form Control Validator that checks if a field is valid XML using the DOMParser class.

1. Create a Validator Function with DOMParser

The DOMParser class allows us to parse XML and HTML from a string, it's built-in directly to JavaScript/TypeScript so we don’t need to install a third-party library to build our validator function. This function will take in a control parameter which is the form control in question. The validator function should look like this:

MyCustomXMLValidator(control: AbstractControl){ 
   var domParser = new DOMParser(); ty
   var dom = domPraser.parseFromString(control.value, 'text/xml'); 
   if(dom.getElementByTagName('parsererror').length > 0) { 
       return { invalidXml: true}; 
   } 
   return null; 
}

The validator function will parse the XML string provided by the control parameter using the DOMParser class and check if any parser errors have been found. If a parser error has been found, then it will return an object with a key of invalidXml set to true. If no parse errors have been found, it will return null.

3. Use the Validator Function in your Reactive Form Control

Finally, you must use this validator function in your Reactive Form Control. To do this, open the component where your Reactive Form resides and add the MyCustomXMLValidator in the validators array when declaring the Form Control:

this.form = this.fb.group({ 
  xmlField: new FormControl('', [Validators.Required, MyCustomXMLValidator])
})

This code declares a new form group with a field called ‘xmlField’ that tells the Reactive Form Control to use the validator function you created earlier to validate any value entered into it.

And that’s it! Now you have successfully created an Angular Reactive Form Control Validator that checks if a field is valid XML by using the DOMParser class. By following these steps and using this code, you can easily create an Angular Reactive Form Control Validator that checks for valid XML.

Thank you for reading. If you liked this blog, consider following my Medium account for daily blogs about software engineering and technology topics!