DEV Community

loading...

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

loizenai
Software Engineer - Founder at https://loizenai.com
・2 min read

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 ngModel for two-way data binding, visual feedback and handling error messages.

Related posts:

Technologies

  • Node.js – version v10.4.0
  • Angular – version 6
  • Bootstrap 4
  • Visual Studio Code – version 1.24.0

Objectives

We build an Angular project as below structure:

angular-6-template-driven-form +project-structure

Workflow

-> Initial form:

angular-6-template-driven-form +customer-form-initial

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

angular-6-template-driven-form +customer-form-all-valid

-> Press Submit button to submit form:

angular-6-template-driven-form +submitted-customer

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

angular-6-template-driven-form + message-error-for-required-fields

Angular Template Driven Form

Project Setup

  • 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

Discussion (0)