Following are the key points discussed later in this article:
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.
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 { }
<input type="email" class="form-control" id="email" placeholder="Email" required [(ngModel)]="model.email" name="email" >
<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 are based on reactive style of programming. Following are key aspects of reactive forms:
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 { }
</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] + ' '; } } } }
email = new FormControl('', Validators.required);
loginForm = new FormGroup({ email: new FormControl('', Validators.required) });
Last updated: 3rd May, 2024 Have you ever wondered why some machine learning models perform…
Last updated: 2nd May, 2024 The success of machine learning models often depends on the…
When working on a machine learning project, one of the key challenges faced by data…
Last updated: 1st May, 2024 The bias-variance trade-off is a fundamental concept in machine learning…
Last updated: 1st May, 2024 As a data scientist, understanding the nuances of various cost…
Last updated: 1st May, 2024 In this post, you will learn the concepts related to…
View Comments
Thanks for sharing the concepts