Angular 11 Template Driven Form – NgModel for Two-Way Data Binding
Tags: angular11, ngmodel
Published: 2021-03-11 10:41:39

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

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

- <a href="https://grokonez.com/frontend/angular-6-form-validation-example-template-driven-forms">Angular 11 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://grokonez.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://grokonez.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://grokonez.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://grokonez.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://grokonez.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>
<h3>Project Setup</h3>
- Generate Angular project:

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-template-driven-form-create-project.png" alt="angular-6-template-driven-form +create-project" width="681" height="502" class="alignnone size-full wp-image-13295" />

– Generate:
<ul>
<li>Customer Component</li>
<li>Customer Class</li>
</ul>

<img src="https://grokonez.com/wp-content/uploads/2018/06/angular-6-template-driven-form-generate-customer-component-and-class-customer.png" alt="angular-6-template-driven-form +generate-customer-component-and-class-customer" width="611" height="167" class="alignnone size-full wp-image-13297" />

– Install Bootstrap 4:

<pre>
npm install bootstrap jquery --save
</pre>

-> Configure installed Bootstrap & JQuery in <code>angular.json</code> file:

<pre><code class="language-javascript">
...
 
"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]
 
...
</code></pre>

Add the selector <code>app-customer</code> of <code>CustomerComponent</code> to the template <code>app.component.html</code> of <code>AppComponent</code> as below:

<pre><code class="language-html">&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-4&quot;&gt;
      &lt;app-customer&gt;&lt;/app-customer&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

-> Now the project setting is ready for coding.

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