Introduction to forms

Managing user input forms with formats is the cornerstone of most common applications. Applications use forms to enable users to login, profile updates, enter sensitive information, and perform many other data entry functions.

Angular offers two different ways to manage user input forms: active and template-driven. Both capture user input events from the view, validate user input, create a form and an update data model, and provide a way to track changes.

This guide provides information to help you decide which form works best for your situation. Introduce standard building blocks used by both methods. It also summarizes the key differences between the two approaches, and identifies those differences in the context of setup, data flow, and testing.

Prerequisites

This guide is considered a basic understanding of the following.

• TypeScript and HTML5.
• The basic principles of app design, as defined in Angular Concepts.
• Foundations of Angular template syntax.

Follow other articles

• TEMPLATE DRIVEN FORMS
• ANGULAR REACTIVE FORM VALIDATION EXAMPLE
• AUTOFOCUS ANGULAR FORM ON SUBMIT
• ANGULAR SUBMIT A FORM PROGRAMMATICALLY

Choice method

Active forms and template-driven forms process and treat form data separately. Each method offers different benefits.

• Functional forms provide direct, clear access to the basic forms of the object model. Compared to template-driven forms, they are much more robust: awesome, useful and testable. If forms are an integral part of your application, or you are already using functional patterns in building your app, use functional forms.
• Template-driven forms rely on guidelines in the template to create and manipulate a basic object model. They are useful for adding a simple form to an application, such as an email list registration form. It’s easy to add to the app, but it doesn’t measure itself with active forms. If you have the basic form requirements and concepts that can only be controlled by a template, template-driven forms may fit.

The big difference

The table below summarizes the key differences between the active and operated forms of the templates.

REACTIVE TEMPLATE-DRIVE
Setting the form model is Clear, created in the Specified item section, done with guidelines
Structured and consistent data model that is unstructured and consistent
Harmonized hypothetical hypothesis
Directions to form verification functions

Setting the form model

Both the functionality and functionality of tracking forms change the value between the input form elements that users interact with and the form data in your object model. These two methods share basic building blocks, but they differ in the way you build and behave in general form control conditions.

Basic classes of standard form

Both active and operated forms are templates built into the following sections.

• FormControl tracks the amount and verification amount of controls for each form.
• FormGroup tracks the same values ​​as the form of form controls for the form.
• Form Array tracks the same values ​​as the form of the form controls of the form.
• ControlValueAccessor creates a bridge between Angular FormControl DOM events and native objects.

Setup with reactive forms

With active forms, you define a form model directly in the object category. The [formControl] directory connects the explicit form of the FormControl to a specific form object in view, using the internal value access.

The next section uses a single control input field, using the active forms. In this example, the form model is an example of FormControl.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-reactive-favorite-color',
  template: `
    Favorite Color: <input type="text" [formControl]="favoriteColorControl">
  `
})
export class FavoriteColorComponent {
  favoriteColorControl = new FormControl('');
}

Setting in template-driven forms

For template-driven forms, the form model is not included, rather than specified. The NgModel directory creates and manages a FormControl model of a given form object.

The next section uses the same input field for single control, using template-driven forms.

import { Component } from '@angular/core';

@Component({
  selector: 'app-template-favorite-color',
  template: `
    Favorite Color: <input type="text" [(ngModel)]="favoriteColor">
  `
})
export class FavoriteColorComponent {
  favoriteColor = '';
}

Data flow in forms

When an application contains a form, Angular should keep the view aligned with the object model and object model in sync with the view. As users change values ​​and make visual choices, new values ​​should be reflected in the data model. Similarly, when a program concept changes values ​​in a data model, those values ​​should be displayed in view.

Functional and template-based forms vary in the way they handle user data flowing from user or system changes. The following diagrams show both types of data flow for each type of form, using the input field of the favorite color described above.

Data mobility in active forms

In active forms each form of the form in view is directly linked to the form model (for example FormControl). Visual-to-model updates and model-to-visual are compatible and do not depend on how the UI is rendered.

The model view diagram shows how data flows when the input field value is converted from view using the following steps.

1. The user types a value in the input object, in this case your favorite color is Blue.
2. The form input form releases the “input” event at the latest value.
3. The control panel that listens to events in the input form immediately transfers the new value to the FormControl position.
4. The FormControl status releases a new value with the visible value Changes.
5. Any subscribers to the visible value Changes receive a new value.

Data flow in template-driven forms

In template-driven forms, each form element is connected to a directory that controls the form model internally.

The model view diagram shows how data flows when the input field value is converted from view using the following steps.

1. The user is typing blue in the input object.
2. The input object releases the “input” event in blue value.
3. Access to the control value attached to the Value () pairing input method in FormControl mode.
4. The FormControl status releases a new value with the visible value Changes.
5. Any subscribers to the visible value Changes receive a new value.
6. The access value controller also calls for the NgModel.viewToModelUpdate () method that removes the ngModelChange event.
7. Because the component template uses a two-way data binding of the favoriteColor property, your favorite Coloror item in the item is renewed from the value released by the ngModelChange (Blue) event.

Data model flexibility

The change tracking method plays a role in the performance of your app.

• Functional forms keep the data model clean by providing it as a static data structure. Whenever a change is caused by a data model, the FormControl model replaces the new data model rather than updating the existing data model. This gives you the ability to track different changes to the data model from the control perspective. Change discovery works well because it only requires updates to different versions. Because data updates follow active patterns, you can interact with visual functionality to convert data.
• Template-driven forms rely on two-dimensional data binding variables to update the data model in an object as changes are made to the template. Because there is no unique tracking change in the data model when using dual data binding, change detection does not work well in determining when updates are needed.

The difference is shown in previous examples that use a favorite color input object.

• For active forms, the FormControl model always returns a new value when the control value is updated.
• With template-driven forms, a favorite color property is constantly changed to its new value.

Form validation

Verification is an important part of managing any type of form. Whether you are looking for the required fields or asking an external username API that already exists, Angular offers a set of built-in credentials and the ability to create custom credentials.

• Reactive forms define customization verification as tasks that take control to ensure.
• Template-driven forms are integrated with template commands, and should provide customized verification guidelines that wrap the authentication functions.

References

• Introduction to forms in Angular

Thank you! please don’t forget to like our Facebook page to get more interesting updates.