Template Driven Form : Angular

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('[e-mail]', 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…

View on GitHub