Objective
Add a Form with the following Inputs (and Validators)
1) Mail address (should not be empty and should be an email address)
2) A Dropdown which allows the user to select from three different Subscriptions ("Basic", "Advanced", "Pro")
Set "Advanced" as Default
3) A Password field (should not be empty)
4) A Submit Button
Display a warning message if the Form is invalid AND was touched. Display a warning message below each input if it's invalid.
Upon submitting the form, you should simply print the Value of the Form to the Console.
Optionally, display it in your template.
Code
- app-module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- app-component.ts
import { Component } from '@angular/core';
import { Form } from '@angular/forms';
import { UserDetails } from './user-details';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
subOptions = ['Basic', 'Advanced', 'Pro'];
templateForm = new UserDetails('mail@mail.com', this.subOptions[1], 'password');
submitted = false;
onSubmit(templateForm) {
this.submitted = true;
console.log(templateForm.value);
}
}
- app-component.html
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<!-- Add a Form with the following Inputs (and Validators)
1) Mail address (should not be empty and should be an email address)
2) A Dropdown which allows the user to select from three different Subscriptions ("Basic", "Advanced", "Pro")
Set "Advanced" as Default
3) A Password field (should not be empty)
4) A Submit Button
Display a warning message if the Form is invalid AND was touched. Display a warning message below each input if it's invalid.
Upon submitting the form, you should simply print the Value of the Form to the Console.
Optionally, display it in your template.
-->
<form #templateDrivenForm="ngForm" (ngSubmit)="onSubmit(templateDrivenForm)" novalidate> <!--no validate to disable browser validation which interfere with angular validation-->
<div class="form-group">
<label for="email">Email</label>
<input type="text" id="email" class="form-control" required email name="email"
#emailId="ngModel" ngModel>
<div class="alert alert-danger" role="alert" *ngIf="!emailId.valid && (emailId.dirty || emailId.touched)">
<div class="alert alert-danger" role="alert" *ngIf="emailId.errors.required">
Email is required
</div>
<div class="alert alert-danger" role="alert" *ngIf="emailId.errors.email">
Email is not valid, please enter a valid email
</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" class="form-control" required name="password"
#password="ngModel" ngModel minlength="6">
<div class="alert alert-danger" role="alert" *ngIf="!password.valid && (password.dirty || password.touched)">
<div class="alert alert-danger" role="alert" *ngIf="password.errors.required">
Password is required
</div>
<div class="alert alert-danger" role="alert" *ngIf="password.errors.minlength">
Password is having a minimum length of {{ password.errors.minlength.requiredLength }}
</div>
</div>
</div>
<div class="form-group">
<label for="user">Subscriber options</label>
<select name="user" id="user" class="form-control" required #userOption="ngModel" [(ngModel)]="templateForm.subOption">
<option *ngFor="let option of subOptions" [value]="option"> {{ option }}</option>
</select>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!templateDrivenForm.valid">Submit the form</button>
</form>
<br>
<div class="container-fluid">
<pre>Value: {{ templateDrivenForm.value | json}}</pre>
<pre>Valid: {{ templateDrivenForm.valid }}</pre>
<pre>Touched: {{ templateDrivenForm.touched }}</pre>
<pre>Submitted: {{ templateDrivenForm.submitted }}</pre>
</div>
<div class="container-fluid">
<pre>Email Value: {{ emailId.value | json}}</pre>
<pre>Email Valid: {{ emailId.valid }}</pre>
<pre>Email Touched: {{ emailId.touched }}</pre>
</div>
<div class="container-fluid">
<pre>Password Value: {{ password.value | json}}</pre>
<pre>Password Valid: {{ password.valid }}</pre>
<pre>Password Touched: {{ password.touched }}</pre>
</div>
<div class="container-fluid">
<pre>User option Value: {{ userOption.value | json}}</pre>
<pre>User option Valid: {{ userOption.valid }}</pre>
<pre>User option Touched: {{ userOption.touched }}</pre>
</div>
</div>
</div>
</div>
- user-details.ts
export class UserDetails {
constructor(
public mailId: string,
public subOption: string,
public password: string
){}
}
Rohithv07
/
Extra-Material-For-Angular
Covering some features with more hands on
Extra-Material-For-Angular
Covering some features with more hands on
npm install --save-dev @angular-devkit/build-angular
npm install --save bootstrap@3
Data Binding
Directives
ngFor, ngIf, ngStyle, ngClass
Using renderer
Using HostListener
Using HostBinding
Building structural directive
Services
Logging Service and injecting
Data Service
Injecting Services into Services @Injectable()
Services for Cross - component communication
Routing
Setting and loading routes
Router Links
Navigation Paths and styling active router links
Passing parameters to Routes
Fetch Route parameters, also Reactively
Query paramaters, Fragments
Nested Routes
Redirecting and wildcards
Guards
>> canActivate
>> canActivateChild
>> Fake auth service and canDeactivate
Passing static data to route
Resolve Guard
Location startergies useHash: true
Observables
Undestanding angular observables
Custom observables
Data, Errors, Completion
Operators, Subject
Forms
Template Driven vs Reactive
Template Driven
Creating form
Accessing form with @ViewChild
Validation and validation error
ngModel with two way binding
Grouping form controls
Radio buttons
Resetting forms
Reactive Approach
Creating a form
Syncing HTML…
Top comments (0)