{"id":528,"date":"2023-02-21T05:00:00","date_gmt":"2023-02-21T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=528"},"modified":"2023-02-17T16:19:37","modified_gmt":"2023-02-18T00:19:37","slug":"implementing-custom-feedback-to-form-validation-with-angular","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/implementing-custom-feedback-to-form-validation-with-angular\/","title":{"rendered":"Implementing custom feedback to form validation with Angular"},"content":{"rendered":"\n

Yesterday, we saw that Angular uses six different CSS classes<\/a> (actually, eight – I didn’t mention ng-pending<\/code>, which is the temporary state when async validation is being performed, and ng-submitted<\/code>, which applies to the form element only). <\/p>\n\n\n\n

Today, let’s see how we can customize the feedback displayed to the user beyond CSS classes. The nice thing about Angular validation properties is that they’re not just available as CSS classes. They are also available as public properties on the ngModel<\/code> and the ngForm<\/code> directives used in our form.<\/p>\n\n\n\n

We can access such properties using template reference variables<\/a> to access the exported values of these directives<\/a> as follows:<\/p>\n\n\n

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

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

The above code would result in the following rendering:<\/p>\n\n\n

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

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

Of course, displaying true<\/code> or false<\/code> is not very user-friendly. Instead, we can use *ngIf and make the experience a little more polished:<\/p>\n\n\n

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

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

Which looks like this:<\/p>\n\n\n

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

We can apply the same idea to the form<\/code> element and decide to disable the submit button as long as the form is invalid:<\/p>\n\n\n

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

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

Or we could even hide the button as long as the form is invalid:<\/p>\n\n\n

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

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

You get the idea. As simple as those validation properties are, they enable many possible different customizations of how we display validation feedback and hints to the user.<\/p>\n\n\n\n

You can play with my code example on Stackblitz<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Yesterday, we saw that Angular uses six different CSS classes (actually, eight – I didn’t mention ng-pending, which is the temporary state when async validation is being performed, and ng-submitted, which applies to the form element only). Today, let’s see how we can customize the feedback displayed to the user beyond CSS classes. The nice […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,22],"tags":[],"class_list":["post-528","post","type-post","status-publish","format-standard","hentry","category-angular","category-forms"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=528"}],"version-history":[{"count":6,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/528\/revisions"}],"predecessor-version":[{"id":540,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/528\/revisions\/540"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}