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) });
In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…
Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…
With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…
Anxiety is a common mental health condition that affects millions of people around the world.…
In machine learning, confounder features or variables can significantly affect the accuracy and validity of…
Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…
View Comments
Thanks for sharing the concepts