reactive - Bipon's Diary

Diving Deeper into Reactive Forms

bipon68 — Wed, 08 Jan 2020 12:11:16 +0000

Step 1: create-session.component.html initial setup


    Create Session
  
  
    
      
        Session Name:
        
      
      
        Presenter:
        
      
      
        Duration:
        
      
      
        Level:
        
      
      
        Abstract:

Step 2: create-session.component.ts initial setup

import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({
    templateUrl: './create-session.component.html'
})


export class createSessionComponent implements OnInit{

    newSessionForm: FormGroup
    name:FormControl
    presenter: FormControl
    duration:FormControl
    level:FormControl
    abstract:FormControl

    constructor(){}

    ngOnInit(){

        this.name = new FormControl('', Validators.required)
        this.presenter = new FormControl('', Validators.required)
        this.duration = new FormControl('', Validators.required)
        this.level = new FormControl('', Validators.required)
        this.abstract = new FormControl('', [Validators.required, Validators.maxLength(400)])

        this.newSessionForm = new FormGroup({
            name: this.name,
            presenter: this.presenter,
            duration: this.duration,
            level: this.level,
            abstract: this.abstract
        })
    }

    saveSession(formValues){
        console.log(formValues)
    }

}

Step 3: updated create-session.component.html file


    Create Session
  
  
    
      
        Session Name:
        
      
      
        Presenter:
        
      
      
        Duration:
        
      
      
        Level:
        
      
      
        Abstract:

Step 4: create-session.component.ts

import { ISession } from './../shared/event.model';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({
    templateUrl: './create-session.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 createSessionComponent implements OnInit{

    newSessionForm: FormGroup
    name:FormControl
    presenter: FormControl
    duration:FormControl
    level:FormControl
    abstract:FormControl

    constructor(){}

    ngOnInit(){

        this.name = new FormControl('', Validators.required)
        this.presenter = new FormControl('', Validators.required)
        this.duration = new FormControl('', Validators.required)
        this.level = new FormControl('', Validators.required)
        this.abstract = new FormControl('', [Validators.required, Validators.maxLength(400)])

        this.newSessionForm = new FormGroup({
            name: this.name,
            presenter: this.presenter,
            duration: this.duration,
            level: this.level,
            abstract: this.abstract
        })
    }

    saveSession(formValues){
        // console.log(formValues)
        let session:ISession = {
            id: undefined,
            name: formValues.name,
            presenter:formValues.presenter,
            duration: +formValues.duration,
            level:formValues.lebel,            
            abstract:formValues.abstract,
            voters: []
        }
        console.log(session)
    }

}

Step 5: create-session.component.html again update for validation


    Create Session
  
  
    
      
        Session Name:
        Required
        
      
      
        Presenter:
        Required
        
      
      
        Duration:
        Required
        
      
      
        Level:
        Required
        
      
      
        Abstract:
        Required
        Cannot exceed 400 character

The post Diving Deeper into Reactive Forms first appeared on Bipon's Diary.

Multiple Validators in Reactive Forms

bipon68 — Mon, 06 Jan 2020 13:19:46 +0000

profile.component.html


  Edit Your Profile 
  
  
    
      
        First Name:
        Required
        Must start with a letter
        
      
      
        Last Name:
        Required

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.

Validating Reactive Forms

bipon68 — Mon, 06 Jan 2020 10:01:44 +0000

profile.component.html


  Edit Your Profile 
  
  
    
      
        First Name:
        Required
        
      
      
        Last Name:
        Required

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.

Creating Your First Reactive Form

bipon68 — Mon, 06 Jan 2020 09:46:04 +0000

profile.component.html


    Edit Your Profile 
    
    
      
        
          First Name:
          
        
        
          Last Name:

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.