{"id":550,"date":"2023-02-23T05:00:00","date_gmt":"2023-02-23T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=550"},"modified":"2023-02-22T16:35:05","modified_gmt":"2023-02-23T00:35:05","slug":"using-validation-functions-that-work-with-both-template-driven-and-reactive-forms","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/using-validation-functions-that-work-with-both-template-driven-and-reactive-forms\/","title":{"rendered":"Using validation functions that work with both template-driven and reactive forms"},"content":{"rendered":"\n

Yesterday, we looked at how to write a validation function<\/a> that works with reactive forms. Template-driven forms have a somewhat similar approach that also uses a validator function but requires a wrapper directive that implements the Validator<\/a><\/code> interface like this one (example here<\/a>):<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The easiest solution to write a validation function that works with both reactive forms and template-driven forms is to create a directive for the template-driven form validation and then expose the validation function as a static method of that class:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

A static method has two advantages in that scenario:<\/p>\n\n\n\n