- [Narrator] Checking if the form is valid…is pretty straightforward.…Remember, the entire representation of the form model,…is by a parent form group and form group objects…will aggregate the validity of…all their child form controls.…So that means, checking if the entire form is valid…can be done by looking at the orderSheetForm.valid property.…I'm going to use that to disable the submit button,…so over in the order-sheet.component.html file,…down at the bottom on the button of type submit,…I'll add a property binding for the native DOM property…of disabled, so square brackets around disabled…and set that to the statement !orderSheetForm.valid…that way when the valid property is false,…the disabled property will get set to true.…

The order-sheet.component.css file already has some styling…for buttons with the disabled attribute.…Setting the disabled property results in the disabled…attribute getting put on the element.…So this submit button will get styled as disabled…and the click functionality will be disabled…

Resume Transcript Auto-Scroll

Author

Updated

12/7/2016

Released

6/27/2016

Building HTML forms for the web world is never as straightforward as expected. Collecting user input, and implementing dynamic form validation that automatically reacts to input, can be difficult without the right solution. When building client-side apps using Angular, you get a good amount of framework code out-of-the-box that makes working with forms a breeze. Angular allows you to easily handle dynamic form validation by taking advantage of two-way data-binding functionality.

This course shows how to build HTML web forms using the building blocks, built-in validation properties, and methods of the Angular forms module. Learn how to use the model-driven forms approach to build out a model representation of form data in code and bind it to native HTML form elements. This course also explores how to implement validation, using JavaScript, in case you need more fine-tuned control of your interactions.

Topics include:

Building an Angular form

Creating a model-driven form

Using the three fundamental form building blocks: Controls, groups, and arrays

Handling different input types: Text, checkboxes, selections, and radio input