Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

Angular 7 Forms

Angular 7 Forms with angular7, tutorial, introduction, angular, js, Installation, History and Versions, First App, files explanation, Components, Directives, ngIf Directive, ngFor Directive, ngClassDirective, ngStyle Directive, Angular 7 with Bootstrap etc.

<< Back to ANGULAR

Angular 7 Forms

Angular forms are used to handle user's input. We can use Angular form in our application to enable users to log in, to update profile, to enter information, and to perform many other data-entry tasks.

In Angular 7, there are 2 approaches to handle user's input through forms:

  • Reactive forms
  • Template-driven forms

Both approaches are used to collect user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.

Reactive Forms vs. Template-driven Forms

Both Reactive forms and Template-driven forms manage and process data differently. Each offers different advantages.

Reactive Forms

  • Reactive forms are more robust.
  • Reactive forms are more scalable, reusable, and testable.
  • They are most preferred to use if forms are a key part of your application, or your application is already built using reactive patterns. In both cases, reactive forms are best to use.

Template-driven Forms

  • Template-driven forms are best if you want to add a simple form to your application. For example: email list signup form.
  • Template-driven forms are easy to use in the application but they are not as scalable as Reactive forms.
  • Template-driven forms are mainly used if your application's requires a very basic form and logic. It can easily be managed in a template.

Difference between Reactive Forms and Template-driven Forms

Comparison Index Reactive Forms Template-driven Forms
Setup (form model) Reactive forms are more explicit. They are created in component class. Template-driven forms are less explicit. They are created by directives.
Data model Structured Unstructured
Predictability Synchronous Asynchronous
Form validation Functions Directives
Mutability Immutable Mutable
Scalability Low-level API access Abstraction on top of APIs

Similarity between Reactive Forms and Template-driven Forms

There are some building blocks which are shared by both reactive and template-driven forms:

  • FormControl: It is used to track the value and validation status of an individual form control.
  • FormGroup: It is used to track the same values and status for a collection of form controls.
  • FormArray: It is used to track the same values and status for an array of form controls.
  • ControlValueAccessor: It is used to create a bridge between Angular FormControl instances and native DOM elements.

Form Model Setup

Form model setup is used to track value changes between Angular forms and form input elements. Let's take an example to see how the form model is defined and created.

Form model setup in Reactive forms

See the below component with an input field for a single control implemented using reactive forms.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
  selector: 'app-reactive-favorite-color',
  template: `
    Favorite Color:  `
export class FavoriteColorComponent {
  favoriteColorControl = new FormControl('');

In reactive forms, the form model is the source of truth. The source of truth provides the value and status of the form element at a given point in time.

Here, in the example above, the form model is the FormControl instance.

Angular 7 Forms

In reactive forms, the form model is explicitly defined in component class. After that the reactive form directive (here, it is: FormControlDirective) links the existing FormControl instance to a specific form element in the view using a value accessor (ControlValueAccessor instance).

Form model setup in Template-driven Forms

See the same above component with an input field for a single control implemented using template-driven forms.

import { Component } from '@angular/core';
  selector: 'app-template-favorite-color',
  template: `
    Favorite Color:  `
export class FavoriteColorComponent {
  favoriteColor = '';

In template-driven forms, the source of truth is template itself.

Angular 7 Forms

The form model abstraction promotes simplicity over structure. The template-driven form directive NgModel creates and manages the FormControl instance for a given form element. It's less explicit, but it removes the direct control over the form model.

Related Links:

Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf