Angular – Form Validation

On the first part of the FORMS series, we learned how to  add a form using Angular’s built-in directive *ngForm. In this lesson, we will learn Form Validation.

Form validation will make our modal look cleaner and arranged. To add forms, go back to your IDE and open the file dashboard.component.html.

form validation

  • <form> enclosed the contents of the modal-body and added <label> to specified fields.
  • ‘stockCode’ and ‘stockName’ were adjusted accordingly.
  • Class ‘form-control’ was also added to keep the input field tight and neat inside the modal.

Save your work and open the Add Stock modal again on your browser.

form validation

The form was added successfully.

Next, by adding the word required in our form, input fields will now require the user to fill in the necessary data.

form validation

  • In your IDE, a ‘required’ is added inside the <input> tags
  • Then, another <button> was also added to check if there are any unfilled input fields.

Save your work and go back to your browser.

form validation

Form validation is successful and both fields are now looking for data input before adding a new stock.

On the third article in the FORMS series, we will tackle Custom Form Validation.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.