Angular Cookbook by Muhammad Ahsan Ayaz

Author:Muhammad Ahsan Ayaz
Language: eng
Format: epub
Publisher: Packt Publishing Pvt Ltd
Published: 2021-07-19T00:00:00+00:00

Great! You just learned how to validate template-driven forms and to make the overall user experience with template-driven forms slightly better.

How it works…

The core components of this recipe were the ngForm and ngModel directives. We could easily identify whether the submit button should be clickable (not disabled) or not based on whether the form is valid, that is, if all the inputs in the form have valid values. Note that we used the template variable created using the #releaseForm="ngForm" syntax on the <form> element. This is possible due to the ability of the ngForm directive to be exported into a template variable. Therefore, we were able to use the releaseForm.invalid property in the [disabled] binding of the submit button to conditionally disable it. We also showed the errors on individual inputs based on the condition that the input might be invalid. In this case, we show the Bootstrap alert element ( a <div> with the CSS class alert). We also use Angular's provided classes, ng-valid and ng-invalid, on the form inputs to highlight the input in a certain way depending on the validity of the input's value. What's interesting about this recipe is that we validated the app name's input by making sure it contains a non-falsy value where the first <option> of the <select> box has the value "". And what's even more fun is that we also validated the version name right when the user types it using the [pattern] binding on the input to a regex. Otherwise, we'd have to wait for the user to submit the form, and then it would have been validated. Thus, we're providing a great user experience by providing the errors as the user types the version.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.