Home | Contact Us

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

Angular Reactive Forms

Angular Reactive 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 Reactive Forms

Angular reactive forms follow a model-driven approach to handle form input whose values can be changed over time. These are also known as model-driven forms. In reactive forms, you can create and update a simple form control, use multiple controls in a group, validate form values, and implement more advanced forms.

Reactive forms use an explicit and immutable approach to manage the state of the form at a given point of time. When we change the form state, it returns a new state which manages the integrity of the models between changes. In reactive forms, you build your own representation of a form in the component class.

Reactive forms are easy to test because they assure consistent and predictable data when requested.

How to add a single form control

In this section, we will describe how to add a single form control. Here, the users have to enter their name into an input field, form captures that input value, and displays the current value of the form control element.

Follow these steps:

1. Register the reactive forms module

You have to import ReactiveFormsModule from the @angular/forms package and add it to your NgModule's imports array to use reactive forms.

import { ReactiveFormsModule } from '@angular/forms';
imports: [
    // other imports ...
export class AppModule { }

2. Generate and Import a new form control

First, generate a component for the control by using the following syntax:

ng generate component NameEditor

To register a single form control, you have to import the FormControl class into your component and create a new instance of the form control to save as a class property. The FormControl class is the basic building block used in reactive forms.

Write the following code in name-editor.component.ts file:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
export class NameEditorComponent {
  name = new FormControl('');

3. Now, register the control in the template

After creating the control in the component class, you have to add it to the form control element in the template. Use the formControl binding provided by FormControlDirective to update the template with the form control.

  <input type="text" [formControl]="name">

We have registered the form control to the name input element in the template. Now, the form control and DOM element communicate with each other and the view reflects changes in the model, and the model reflects changes in the view.

4. Display the component

Add the form control component to the template to display the form. Add the following code to app.component.html.



Angular Reactive Forms

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