This article represents quick introduction to two different kind of forms which can be created in Angular 2 or Angular 4. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.
Following are the key points discussed later in this article:
- Template-driven forms
- Reactive forms
Template-driven forms
Template-driven forms are the most trivial type of form that can be quickly created in Angular 2. Following are key aspects of creating template-driven form.
- These forms are asynchronous in nature.
- These forms require inclusion/import of FormsModule in the root module, AppModule which is placed in the root folder of the app. Following is the sample code:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, LoginComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
- In the form, ngModel is used for two-way data binding. Take a look at sample code given below.
<input type="email" class="form-control" id="email" placeholder="Email" required [(ngModel)]="model.email" name="email" >
- Validation related login is placed into the UI code. Take a look at following example where email field validation logic is placed just beside input element.
<input type="text" class="form-control" id="fullname" placeholder="Full Name" required [(ngModel)]="model.fullname" name="fullname" #fullname="ngModel" > <div [hidden]="fullname.valid || fullname.pristine" class="alert alert-danger"> Full name is required </div>
Reactive Forms
Reactive forms are based on reactive style of programming. Following are key aspects of reactive forms:
- These forms are synchronous in nature unlike template-driven forms.
- These forms require inclusion/import of ReactiveFormsModule in the root module, AppModule which is placed in the root folder of the app. Following is the sample code:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { LoginComponent } from './rlogin/login.component'; @NgModule({ imports: [ BrowserModule, ReactiveFormsModule ], declarations: [ AppComponent, LoginComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
- Form controls are created and managed in component code rather than the UI unlike the template-driven forms.
- Validation logic is placed within Component rather than the UI code as like template driven forms. Take a look at sample code given below which resides in the Component class.
</pre> export class LoginComponent { formErrors = { 'email': '', 'password': '' }; validationMessages = { 'email': { 'required': 'Email is required.' }, 'password': { 'required': 'Password is required.' } }; createForm() { this.loginForm.valueChanges .subscribe(data => this.onValueChanged(data)); this.onValueChanged(); } onValueChanged(data?: any) { if (!this.loginForm) { return; } const form = this.loginForm; for (const field in this.formErrors) { this.formErrors[field] = ''; const control = form.get(field); if (control && control.dirty && !control.valid) { const messages = this.validationMessages[field]; for (const key in control.errors) { this.formErrors[field] += messages[key] + ' '; } } } }
- Logic related with communicating with server is delegated to services.
- Following are key Form-related classes which are used to manage Form UI elements:
- AbstractControl: AbstractControl represents base class from which below mentioned classes are derived.
- FormControl: Instances of FormControl represents actual UI element.
email = new FormControl('', Validators.required);
- FormGroup: These are used to group one or more AnstractControl interfaces. Following represents a sample login form.
loginForm = new FormGroup({ email: new FormControl('', Validators.required) });
- FormArray: These are used to hold AbstractConrol interfaces in an array.
Latest posts by Ajitesh Kumar (see all)
- Agentic Reasoning Design Patterns in AI: Examples - October 18, 2024
- LLMs for Adaptive Learning & Personalized Education - October 8, 2024
- Sparse Mixture of Experts (MoE) Models: Examples - October 6, 2024
Thanks for sharing the concepts