Angular 6 Template Driven Form – NgModel for Two-Way Data Binding
Tags: angular, template, form, ngmodel
Published: 2021-06-10 10:01:15

https://ozenero.com/angular-6-template-driven-form-ngmodel-for-two-way-data-binding

Angular 6 Template Driven Form – NgModel for Two-Way Data Binding

In the tutorial, we show how to develop an Angular Form using Template-Driven Form approach with <code>ngModel</code> for two-way data binding, visual feedback and handling error messages.

Related posts:
- <a href="https://ozenero.com/frontend/angular/angular-6/how-to-integrate-bootstrap-with-angular-angular-6">How to Integrate Bootstrap with Angular (Angular 6)</a>
- <a href="https://ozenero.com/frontend/angular-6-component-how-to-create-integrate-new-angular-6-component">Angular 6 Component – How to create & integrate New Angular 6 Component</a>
- <a href="https://ozenero.com/frontend/angular/angular-6/angular-6-ngfor-repeater-directive-loop-over-a-collection">Angular NgFor Repeater Directive – Loop over a Collection (Angular 6)</a>

- <a href="https://ozenero.com/frontend/angular-6-form-validation-example-template-driven-forms">Angular 6 Form Validation example – Template-driven Forms</a>

<!--more-->
<h2>Technologies</h2>
<ul>
<li>Node.js – version v10.4.0</li>
<li>Angular – version 6</li>
<li>Bootstrap 4</li>
<li>Visual Studio Code – version 1.24.0</li>
</ul>
<h2>Objectives</h2>
We build an Angular project as below structure:

<img src="https://ozenero.com/wp-content/uploads/2018/06/angular-6-template-driven-form-project-structure.png" alt="angular-6-template-driven-form +project-structure" width="241" height="459" class="alignnone size-full wp-image-13290" />

<strong>Workflow</strong>

-> Initial form:

<img src="https://ozenero.com/wp-content/uploads/2018/06/angular-6-template-driven-form-customer-form-initial.png" alt="angular-6-template-driven-form +customer-form-initial" width="425" height="389" class="alignnone size-full wp-image-13291" />

Input <code>Name</code>, <code>Age</code> and select <code>Nationality</code> option:
-> Valid data form:

<img src="https://ozenero.com/wp-content/uploads/2018/06/angular-6-template-driven-form-customer-form-all-valid.png" alt="angular-6-template-driven-form +customer-form-all-valid" width="432" height="399" class="alignnone size-full wp-image-13292" />

-> Press <strong>Submit</strong> button to submit form:

<img src="https://ozenero.com/wp-content/uploads/2018/06/angular-6-template-driven-form-submitted-customer.png" alt="angular-6-template-driven-form +submitted-customer" width="411" height="292" class="alignnone size-full wp-image-13293" />

- Press <strong>Edit</strong> button, The <em>Data Form</em> will be appeared again.
- Delete text of <code>Name</code> input, and select <strong>bank</strong> value for <code>Nationality</code> input.
-> <em>Error Alert Message</em> appeares:

<img src="https://ozenero.com/wp-content/uploads/2018/06/angular-6-template-driven-form-message-error.png" alt="angular-6-template-driven-form + message-error-for-required-fields" width="432" height="497" class="alignnone size-full wp-image-13294" />
<h2>Angular Template Driven Form</h2>
<h4>Project Setup</h4>
- Generate Angular project:

More at:

https://ozenero.com/angular-6-template-driven-form-ngmodel-for-two-way-data-binding

Angular 6 Template Driven Form – NgModel for Two-Way Data Binding