Angular Template-driven Forms

You can build forms by writing templates in the Angular template syntax with the form-specific directives and techniques described in this page.

You can also use a reactive (or model-driven) approach to build forms. However, this page focuses on template-driven forms.

You can build almost any form with an Angular template—login forms, contact forms, and pretty much any business form. You can lay out the controls creatively, bind them to data, specify validation rules and display validation errors, conditionally enable or disable specific controls, trigger built-in visual feedback, and much more.

Angular makes the process easy by handling many of the repetitive, boilerplate tasks you’d otherwise wrestle with yourself.

You’ll build this form in small steps:

Create the Hero model class.
Create the component that controls the form.
Create a template with the initial form layout.
Bind data properties to each form control using the ngModel two-way data-binding syntax.
Add a name attribute to each form-input control.
Add custom CSS to provide visual feedback.
Show and hide validation-error messages.
Handle form submission with ngSubmit.
Disable the form’s Submit button until the form is valid.

When we talk about “template-driven” forms, we’ll actually be talking about the kind of forms we’re used to with AngularJS, whereby we bind directives and behaviour to our templates, and let Angular roll with it. Examples of these directives we’d use are ngModel and perhaps required, minlength and so forth. On a high-level, this is what template-driven forms achieve for us – by specifying directives to bind our models, values, validation and so on, we are letting the template do the work under the scenes.

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.

• Practice Test for Angular4

• Govt Certification in Angular 4
• Blog posts on Angular 4 and Web Development

Back to Angular 4 Tutorial Main Page