profile.component.html

<div>
  <h1>Edit Your Profile </h1>
  <hr>
  <div class="col-md-4">
    <form [formGroup]="profileForm" (ngSubmit)="saveProfile(profileForm.value)" autocomplete="off" novalidate>
      <div class="form-group" [ngClass]="{'error' : !validateFirstName() }">
        <label for="firstName">First Name:</label>
        <em *ngIf="!validateFirstName() && profileForm.controls.firstName.errors.required">Required</em>
        <em *ngIf="!validateFirstName() && profileForm.controls.firstName.errors.pattern">Must start with a letter</em>
        <input formControlName="firstName" id="firstName" type="text" class="form-control" placeholder="First Name..." />
      </div>
      <div class="form-group"  [ngClass]="{'error' : !validateLastName() }">
        <label for="lastName">Last Name:</label>
        <em *ngIf="!validateLastName()">Required</em>
        <input formControlName="lastName" id="lastName" type="text" class="form-control" placeholder="Last Name..." />
      </div>

      <button type="submit" class="btn btn-primary">Save</button>
      <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
    </form>
  <div>
</div>

profile.component.ts

import { Component, OnInit } from '@angular/core'
import { FormControl, FormGroup, Validators } from '@angular/forms'
import { AuthService } from './auth.service'
import { Router} from '@angular/router'

@Component({
  templateUrl: './profile.component.html',
  styles: [`
    em {float:right; color:#E05C65; padding-left: 10px;}
    .error input {background-color:#E3C3C5;}
    .error ::-webkit-input-placeholder { color: #999; }
    .error ::-moz-placeholder { color: #999; }
    .error :-moz-placeholder { color:#999; }
    .error :ms-input-placeholder { color: #999; }
  `]
})
export class ProfileComponent implements OnInit {
  profileForm:FormGroup
  private firstName:FormControl
  private lastName:FormControl

  constructor(private router:Router, private authService:AuthService) {

  }

  ngOnInit() {
    this.firstName = new FormControl(this.authService.currentUser.firstName, [Validators.required, Validators.pattern('[a-zA-Z].*')])
    this.lastName = new FormControl(this.authService.currentUser.lastName, Validators.required)

    this.profileForm = new FormGroup({
      firstName: this.firstName,
      lastName: this.lastName
    })
  }

  saveProfile(formValues) {
    console.log('formValues : ', formValues);
    if (this.profileForm.valid) {
      this.authService.updateCurrentUser(formValues.firstName, formValues.lastName)
      this.router.navigate(['events'])
    }
  }

  validateFirstName() {
    return this.firstName.valid || this.firstName.untouched
  }
  
  validateLastName() {
    return this.lastName.valid || this.lastName.untouched
  }

  cancel() {
    this.router.navigate(['events'])
  }
       
}

auth.service.ts

import { Injectable } from '@angular/core'
import { IUser } from './user.model'

@Injectable()
export class AuthService {

  currentUser:IUser
  
  loginUser(userName: string, password: string) {
    this.currentUser = {
      id: 1,
      userName: userName,
      firstName: 'Bipon',
      lastName: 'Biswas'
    }
  }

  isAuthenticated() {
    return !!this.currentUser;
  }

  updateCurrentUser(firstName:string, lastName:string) {
    this.currentUser.firstName = firstName
    this.currentUser.lastName = lastName
  }
}

user.module.ts

import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { RouterModule } from '@angular/router'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'

import { userRoutes } from './user.routes'
import { ProfileComponent } from './profile.component'
import { LoginComponent } from './login.component'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild(userRoutes)
  ],
  declarations: [
    ProfileComponent,
    LoginComponent
  ],
  providers: [

  ]
})
export class UserModule { }

user.routes.ts

import { ProfileComponent } from './profile.component'
import { LoginComponent } from './login.component'

export const userRoutes = [
  {path: 'profile', component: ProfileComponent},
  {path: 'login', component: LoginComponent}
]

The post Multiple Validators in Reactive Forms first appeared on Bipon's Diary.

<div>
  <h1>Edit Your Profile </h1>
  <hr>
  <div class="col-md-4">
    <form [formGroup]="profileForm" (ngSubmit)="saveProfile(profileForm.value)" autocomplete="off" novalidate>
      <div class="form-group" [ngClass]="{'error' : !validateFirstName() }">
        <label for="firstName">First Name:</label>
        <em *ngIf="!validateFirstName()">Required</em>
        <input formControlName="firstName" id="firstName" type="text" class="form-control" placeholder="First Name..." />
      </div>
      <div class="form-group"  [ngClass]="{'error' : !validateLastName() }">
        <label for="lastName">Last Name:</label>
        <em *ngIf="!validateLastName()">Required</em>
        <input formControlName="lastName" id="lastName" type="text" class="form-control" placeholder="Last Name..." />
      </div>

      <button type="submit" class="btn btn-primary">Save</button>
      <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
    </form>
  <div>
</div>

profile.component.ts

import { Component, OnInit } from '@angular/core'
import { FormControl, FormGroup, Validators } from '@angular/forms'
import { AuthService } from './auth.service'
import { Router} from '@angular/router'

@Component({
  templateUrl: './profile.component.html',
  styles: [`
    em {float:right; color:#E05C65; padding-left: 10px;}
    .error input {background-color:#E3C3C5;}
    .error ::-webkit-input-placeholder { color: #999; }
    .error ::-moz-placeholder { color: #999; }
    .error :-moz-placeholder { color:#999; }
    .error :ms-input-placeholder { color: #999; }
  `]
})
export class ProfileComponent implements OnInit {
  profileForm:FormGroup
  private firstName:FormControl
  private lastName:FormControl

  constructor(private router:Router, private authService:AuthService) {

  }

  ngOnInit() {
    this.firstName = new FormControl(this.authService.currentUser.firstName, Validators.required)
    this.lastName = new FormControl(this.authService.currentUser.lastName, Validators.required)

    this.profileForm = new FormGroup({
      firstName: this.firstName,
      lastName: this.lastName
    })
  }

  saveProfile(formValues) {
    console.log('formValues : ', formValues);
    if (this.profileForm.valid) {
      this.authService.updateCurrentUser(formValues.firstName, formValues.lastName)
      this.router.navigate(['events'])
    }
  }

  validateFirstName() {
    return this.firstName.valid || this.firstName.untouched
  }
  
  validateLastName() {
    return this.lastName.valid || this.lastName.untouched
  }

  cancel() {
    this.router.navigate(['events'])
  }
       
}

auth.service.ts

import { Injectable } from '@angular/core'
import { IUser } from './user.model'

@Injectable()
export class AuthService {

  currentUser:IUser
  
  loginUser(userName: string, password: string) {
    this.currentUser = {
      id: 1,
      userName: userName,
      firstName: 'Bipon',
      lastName: 'Biswas'
    }
  }

  isAuthenticated() {
    return !!this.currentUser;
  }

  updateCurrentUser(firstName:string, lastName:string) {
    this.currentUser.firstName = firstName
    this.currentUser.lastName = lastName
  }
}

user.module.ts

import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { RouterModule } from '@angular/router'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'

import { userRoutes } from './user.routes'
import { ProfileComponent } from './profile.component'
import { LoginComponent } from './login.component'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild(userRoutes)
  ],
  declarations: [
    ProfileComponent,
    LoginComponent
  ],
  providers: [

  ]
})
export class UserModule { }

user.routes.ts

import { ProfileComponent } from './profile.component'
import { LoginComponent } from './login.component'

export const userRoutes = [
  {path: 'profile', component: ProfileComponent},
  {path: 'login', component: LoginComponent}
]

The post Validating Reactive Forms first appeared on Bipon's Diary.

<div>
    <h1>Edit Your Profile </h1>
    <hr>
    <div class="col-md-4">
      <form [formGroup]="profileForm" (ngSubmit)="saveProfile(profileForm.value)" autocomplete="off" novalidate>
        <div class="form-group">
          <label for="firstName">First Name:</label>
          <input formControlName="firstName" id="firstName" type="text" class="form-control" placeholder="First Name..." />
        </div>
        <div class="form-group">
          <label for="lastName">Last Name:</label>
          <input formControlName="lastName" id="lastName" type="text" class="form-control" placeholder="Last Name..." />
        </div>
  
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
      </form>
    </div>
  </div>

profile.component.ts

import { AuthService } from './auth.service';
import { Component, OnInit } from '@angular/core'
import { FormControl, FormGroup } from '@angular/forms'
import { Router } from '@angular/router';

@Component({
  templateUrl: './profile.component.html',
})
export class ProfileComponent implements OnInit{

  profileForm: FormGroup

  constructor(private authService: AuthService, private router: Router){}

  ngOnInit(){
    let firstName = new FormControl(this.authService.currentUser.firstName)
    let lastName = new FormControl(this.authService.currentUser.lastName)
    this.profileForm = new FormGroup({
      firstName: firstName,
      lastName: lastName
    })
  }

  cancel(){
    this.router.navigate(['events'])
  }
  saveProfile(formValues){
    this.authService.updateCurrentUser(formValues.firstName, formValues.lastName)
  }     
}

auth.service.ts

import { Injectable } from '@angular/core';
import { IUser } from './user.model';


@Injectable()
export class AuthService{

    currentUser: IUser;
    //debugger;
    loginUser(userName: string, password: string){
        this.currentUser = {
            id: 1,
            userName: userName,
            firstName: 'Bipon',
            lastName: 'Biswas'
        }
    }
    isAuthenticated(){
        return !this.currentUser;
    }
    updateCurrentUser(firstName:string, lastName: string){
        this.currentUser.firstName = firstName
        this.currentUser.lastName = lastName
    }

}

app.module.ts

import { ProfileComponent } from './profile.component';
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { RouterModule } from '@angular/router'
import { userRoutes } from './user.routes'
import { LoginComponent } from './login.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        RouterModule.forChild(userRoutes)
    ],
    declarations: [
        ProfileComponent,
        LoginComponent
    ],
    providers: [

    ]

})
export class UserModule{

}

The post Creating Your First Reactive Form first appeared on Bipon's Diary.

<h1>Login</h1>
<hr>
<div class="col-md-4">
  <form #loginForm="ngForm" (ngSubmit)="login(loginForm.value)" autocomplete="off">
    <div class="form-group" >
      <label for="userName">User Name:</label>
      <input (ngModel)="userName" name="userName" id="userName" type="text" class="form-control" placeholder="User Name..." />
    </div>
    <div class="form-group" >
      <label for="password">Password:</label>
      <input (ngModel)="password" name="password" id="password" type="password" class="form-control"placeholder="Password..." />
    </div>
        
    <button type="submit" class="btn btn-primary">Login</button>
    <button type="button" class="btn btn-default">Cancel</button>
  </form>
</div>
<!-- {{loginForm.value | json}} -->

Step 2: login.component.ts

import { Component } from '@angular/core'

@Component({
    templateUrl: './login.component.html'
})

export class LoginComponent{

    userName
    password
    
    login(formValues){
        console.log(formValues)
    }

}

The post Creating Your First Template based Form first appeared on Bipon's Diary.

<form #form="ngForm" (ngSubmit)="onSubmit(form)">
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control" [(ngModel)]="userSettings.name" required #nameField="ngModel"
          [class.field-error]="form.submitted && nameField.invalid"/>
    </div>
	<button class="btn btn-primary">Send</button>
</form>

Step 2: user-settings-form.component.ts file

import { NgForm, NgModel } from '@angular/forms';  
onSubmit(form: NgForm){
    console.log('in onSubmmit: ', form.valid);       
  }

Step 3: user-settings-form.component.css file

.field-error{
    border: 1px solid red;
}

The post Submitting form with class binding in Angular first appeared on Bipon's Diary.

<form #form="ngForm" ngNativeValidate">
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control" [(ngModel)]="userSettings.name" required #nameField="ngModel"/>
		  <div *ngIf="!nameField.valid &&  nameField.touched"
            class="alert alert-danger">
            Enter a name
          </div>
    </div>
	<button class="btn btn-primary">Send</button>
</form>

Step 2: user-settings-form.component.css file

.ng-invalid:not(form).ng-touched{
    border: 1px solid red;
}

The post Styling forms with Validation errors in Angular first appeared on Bipon's Diary.

• required
• pattern
• minlength
• maxlength
• min
• max

Step 1: user-settings-form.component.html file

<form #form="ngForm" ngNativeValidate>
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control"  required />
        <button class="btn btn-primary">Send</button>
     </div>
</form>

Step 2: user-settings-form.component.html file

<form #form="ngForm" ngNativeValidate>
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control"  pattern="B.*" />
   <div>
    <button class="btn btn-primary">Send</button>
</form>

Step 3: user-settings-form.component.html file

<form #form="ngForm" ngNativeValidate>
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control"  minlength="3" />
   <div>
    <button class="btn btn-primary">Send</button>
</form>

Step 4: user-settings-form.component.html file

<form #form="ngForm" ngNativeValidate>
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control" type="number" min="3" max="300" />
   <div>
    <button class="btn btn-primary">Send</button>
</form>

The post HTML5 Field Validation in Angular first appeared on Bipon's Diary.

• Use a Component’s Template
• Unit Test Against DOM

Reactive Forms

• Use a Component’s Template
• Create a Form Model in Typescript (this must by in sync with the template)
• Unit Test Against Form Model
• Validation in Form Model

The post Angular Form Technologies first appeared on Bipon's Diary.