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> 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.
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.
- 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 is successful and both fields are now looking for data input before adding a new stock.