form - 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.

Diving Deeper into Template Based Forms

bipon68 — Wed, 08 Jan 2020 10:28:26 +0000

Step 1: create-event.component.html (Initially)

New Event


  
    
      Event Name:
      Required
      
    
    
      Event Date:
      Required
      
    
    
      Event Time:
      Required
      
    
    
      Event Price:
      Required
      
    
    
    
      Event Location:
      
    
    
      
        
      
      
        
      
    

    
      Online Url:
      
    
    
      Image:
      Required
      Must be a png or jpg url

Step 2: event.service.ts

import { IEvent } from './event.model';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs'

@Injectable()
export class EventService{
    getEvents(){
      let subject = new Subject()
      setTimeout(() => {
        subject.next(EVENTS); 
        subject.complete();}, 
        100)
        return subject;
    }

    getEvent(id:number):IEvent{
      return EVENTS.find(event => event.id === id)
    }
    saveEvent(event){
      event.id = 999
      event.session = []
      EVENTS.push(event)
    }
}

const EVENTS:IEvent[] = [
    {
      id: 1,
      name: 'Angular Connect',
      date: new Date('9/26/2036'),
      time: '10:00 am',
      price: 599.99,
      imageUrl: '/assets/images/angularconnect-shield.png',
      onlineUrl: 'http://google.com',
      sessions: [
        {
          id: 1,
          name: "Using Angular 4 Pipes",
          presenter: "Peter Bacon Darwin",
          duration: 1,
          level: "Intermediate",
          abstract: `Learn all about the new pipes in Angular 4, both 
          how to write them, and how to get the new AI CLI to write 
          them for you. Given by the famous PBD, president of Angular 
          University (formerly Oxford University)`,
          voters: ['bradgreen', 'igorminar', 'martinfowler']
        },
        {
          id: 2,
          name: "Getting the most out of your dev team",
          presenter: "Jeff Cross",
          duration: 1,
          level: "Intermediate",
          abstract: `We all know that our dev teams work hard, but with 
          the right management they can be even more productive, without 
          overworking them. In this session I'll show you how to get the 
          best results from the talent you already have on staff.`,
          voters: ['johnpapa', 'bradgreen', 'igorminar', 'martinfowler']
        },
        {
          id: 3,
          name: "Angular 4 Performance Metrics",
          presenter: "Rob Wormald",
          duration: 2,
          level: "Advanced",
          abstract: `Angular 4 Performance is hot. In this session, we'll see 
          how Angular gets such great performance by preloading data on 
          your users devices before they even hit your site using the 
          new predictive algorithms and thought reading software 
          built into Angular 4.`,
          voters: []
        },
        {
          id: 4,
          name: "Angular 5 Look Ahead",
          presenter: "Brad Green",
          duration: 2,
          level: "Advanced",
          abstract: `Even though Angular 5 is still 6 years away, we all want 
          to know all about it so that we can spend endless hours in meetings 
          debating if we should use Angular 4 or not. This talk will look at 
          Angular 6 even though no code has yet been written for it. We'll 
          look at what it might do, and how to convince your manager to 
          hold off on any new apps until it's released`,
          voters: []
        },
        {
          id: 5,
          name: "Basics of Angular 4",
          presenter: "John Papa",
          duration: 2,
          level: "Beginner",
          abstract: `It's time to learn the basics of Angular 4. This talk 
          will give you everything you need to know about Angular 4 to 
          get started with it today and be building UI's for your self 
          driving cars and butler-bots in no time.`,
          voters: ['bradgreen', 'igorminar']
        }
      ]
    },
    {
      id: 2,
      name: 'ng-nl',
      date: new Date('4/15/2037'),
      time: '9:00 am',
      price: 950.00,
      imageUrl: '/assets/images/ng-nl.png',
      onlineUrl: 'http://google.com',
      location: {
        address: 'The NG-NL Convention Center & Scuba Shop',
        city: 'Amsterdam',
        country: 'Netherlands'
      },
      sessions: [
        {
          id: 1,
          name: "Testing Angular 4 Workshop",
          presenter: "Pascal Precht & Christoph Bergdorf",
          duration: 4,
          level: "Beginner",
          abstract: `In this 6 hour workshop you will learn not only how to test Angular 4, 
          you will also learn how to make the most of your team's efforts. Other topics
          will be convincing your manager that testing is a good idea, and using the new
          protractor tool for end to end testing.`,
          voters: ['bradgreen', 'igorminar']
        },
        {
          id: 2,
          name: "Angular 4 and Firebase",
          presenter: "David East",
          duration: 3,
          level: "Intermediate",
          abstract: `In this workshop, David East will show you how to use Angular with the new
          ultra-real-time 5D Firebase back end, hosting platform, and wine recommendation engine.`,
          voters: ['bradgreen', 'igorminar', 'johnpapa']
        },
        {
          id: 3,
          name: "Reading the Angular 4 Source",
          presenter: "Patrick Stapleton",
          duration: 2,
          level: "Intermediate",
          abstract: `Angular 4's source code may be over 25 million lines of code, but it's really 
          a lot easier to read and understand then you may think. Patrick Stapleton will talk
          about his secretes for keeping up with the changes, and navigating around the code.`,
          voters: ['martinfowler']
        },
        {
          id: 4,
          name: "Hail to the Lukas",
          presenter: "Lukas Ruebbelke",
          duration: 1,
          level: "Beginner",
          abstract: `In this session, Lukas will present the 
          secret to being awesome, and how he became the President 
          of the United States through his amazing programming skills, 
          showing how you too can be success with just attitude.`, 
          voters: ['bradgreen']
        },
      ]
    },
    {
      id: 3,
      name: 'ng-conf 2037',
      date: new Date('5/4/2037'),
      time: '10:00 am',
      price: 759.00,
      imageUrl: '/assets/images/ng-conf.png',
      location: {
        address: 'The Palatial America Hotel',
        city: 'Salt Lake City',
        country: 'USA'
      },
      sessions: [
        {
          id: 1,
          name: "How Elm Powers Angular 4",
          presenter: "Murphy Randle",
          duration: 2,
          level: "Intermediate",
          abstract: `We all know that Angular is written in Elm, but did you
          know how the source code is really written? In this exciting look
          into the internals of Angular 4, we'll see exactly how Elm powers
          the framework, and what you can do to take advantage of this knowledge.`,
          voters: ['bradgreen', 'martinfowler', 'igorminar']
        },
        {
          id: 2,
          name: "Angular and React together",
          presenter: "Jamison Dance",
          duration: 2,
          level: "Intermediate",
          abstract: `React v449.6 has just been released. Let's see how to use 
          this new version with Angular to create even more impressive applications.`,
          voters: ['bradgreen', 'martinfowler']
        },
        {
          id: 3,
          name: "Redux Woes",
          presenter: "Rob Wormald",
          duration: 1,
          level: "Intermediate",
          abstract: `Everyone is using Redux for everything from Angular to React to 
          Excel macros, but you're still having trouble grasping it? We'll take a look
          at how farmers use Redux when harvesting grain as a great introduction to 
          this game changing technology.`,
          voters: ['bradgreen', 'martinfowler', 'johnpapa']
        },
        {
          id: 4,
          name: "ng-wat again!!",
          presenter: "Shai Reznik",
          duration: 1,
          level: "Beginner",
          abstract: `Let's take a look at some of the stranger pieces of Angular 4,
          including neural net nets, Android in Androids, and using pipes with actual pipes.`,
          voters: ['bradgreen', 'martinfowler', 'igorminar', 'johnpapa']
        },
        {
          id: 5,
          name: "Dressed for Success",
          presenter: "Ward Bell",
          duration: 2,
          level: "Beginner",
          abstract: `Being a developer in 2037 is about more than just writing bug-free code. 
          You also have to look the part. In this amazing expose, Ward will talk you through
          how to pick out the right clothes to make your coworkers and boss not only
          respect you, but also want to be your buddy.`,
          voters: ['bradgreen', 'martinfowler']
        },
        {
          id: 6,
          name: "These aren't the directives you're looking for",
          presenter: "John Papa",
          duration: 2,
          level: "Intermediate",
          abstract: `Coinciding with the release of Star Wars Episode 18, this talk will show how
          to use directives in your Angular 4 development while drawing lessons from the new movie,
          featuring all your favorite characters like Han Solo's ghost and Darth Jar Jar.`,
          voters: ['bradgreen', 'martinfowler']
        },
      ]
    },
    {
      id: 4,
      name: 'UN Angular Summit',
      date: new Date('6/10/2037'),
      time: '8:00 am',
      price: 800.00,
      imageUrl: '/assets/images/basic-shield.png',
      location: {
        address: 'The UN Angular Center',
        city: 'New York',
        country: 'USA'
      },
      sessions: [
        {
          id: 1,
          name: "Diversity in Tech",
          presenter: "Sir Dave Smith",
          duration: 2,
          level: "Beginner",
          abstract: `Yes, we all work with cyborgs and androids and Martians, but 
          we probably don't realize that sometimes our internal biases can make it difficult for
          these well-designed coworkers to really feel at home coding alongside us. This talk will
          look at things we can do to recognize our biases and counteract them.`,
          voters: ['bradgreen', 'igorminar']
        },
        {
          id: 2,
          name: "World Peace and Angular",
          presenter: "US Secretary of State Zach Galifianakis",
          duration: 2,
          level: "Beginner",
          abstract: `Angular has been used in most of the major peace brokering that has
          happened in the last decade, but there is still much we can do to remove all
          war from the world, and Angular will be a key part of that effort.`,
          voters: ['bradgreen', 'igorminar', 'johnpapa']
        },
        {
          id: 3,
          name: "Using Angular with Androids",
          presenter: "Dan Wahlin",
          duration: 3,
          level: "Advanced",
          abstract: `Androids may do everything for us now, allowing us to spend all day playing 
          the latest Destiny DLC, but we can still improve the massages they give and the handmade
          brie they make using Angular 4. This session will show you how.`,
          voters: ['igorminar', 'johnpapa']
        },
      ]
    },
    {
      id: 5,
      name: 'ng-vegas',
      date: new Date('2/10/2037'),
      time: '9:00 am',
      price: 400.00,
      imageUrl: '/assets/images/ng-vegas.png',
      location: {
        address: 'The Excalibur',
        city: 'Las Vegas',
        country: 'USA'
      },
      sessions: [
        {
          id: 1,
          name: "Gambling with Angular",
          presenter: "John Papa",
          duration: 1,
          level: "Intermediate",
          abstract: `No, this talk isn't about slot machines. We all know that 
          Angular is used in most waiter-bots and coke vending machines, but
          did you know that was also used to write the core engine in the majority
          of voting machines? This talk will look at how all presidential elections
          are now determined by Angular code.`,
          voters: ['bradgreen', 'igorminar']
        },
        {
          id: 2,
          name: "Angular 4 in 60ish Minutes",
          presenter: "Dan Wahlin",
          duration: 2,
          level: "Beginner",
          abstract: `Get the skinny on Angular 4 for anyone new to this great new technology.
          Dan Wahlin will show you how you can get started with Angular in 60ish minutes, 
          guaranteed!`,
          voters: ['bradgreen', 'igorminar', 'johnpapa']
        }
      ]
    }
  ]

Step 3: create-event.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { EventService } from '../shared/event.service';

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

    isDirty:boolean = true;
    newEvent
    event: any;

    constructor(private router: Router, private eventService: EventService){}

    ngOnInit(){
        this.event = {
            name: 'UI Event',
            date: '9/9/2020',
            time: '10am',
            price: 999.99,
            location: {
                address: '456 happy St',
                city: 'London',
                country: 'UK'
            },
            onlineUrl: 'http://google.com',
            imageUrl: 'http://google.com/cat.png'
        }
    }

    saveEvent(formValues){
        // console.log(formValues)
        this.eventService.saveEvent(formValues)
        this.isDirty = false
        this.router.navigate(['/events']);
    }

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

}

Step 4: create-event.component.html

New Event


  
    
      Event Name:
      Required
      
    
    
      Event Date:
      Required
      
    
    
      Event Time:
      Required
      
    
    
      Event Price:
      Required
      
    

    
        
            Event Location:
            
          
          
            
              
            
            
              
            
          
    
    
    

    
      Online Url:
      
    
    
      Image:
      Required
      Must be a png or jpg url

app.module.ts

import { AuthService } from './user/auth.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { EventsAppComponent } from './events-app.component';
import { EventListComponent } from './events/event-list.component';
import { EventThumbnailComponent } from './events/event-thumbnail.component';
import { EventService } from './events/shared/event.service';
import { ToastrService } from './common/toastr.service';
import { EventDetailsComponent } from './events/event-details/event-details.component';
import { RouterModule } from '@angular/router';
import { appRoutes } from 'src/routes';
import { CreateEventComponent } from './events/event-details/create-event.component';
import { Error404Component } from './errors/404.component';
import { EventRouteActivator } from './events/event-details/event-route.activator.service';
import { EventListResolver } from './events/shared/events-list-resolver.service';
import { NavBarComponent } from './nav/nav-bar.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    EventsAppComponent,
    EventListComponent,
    EventThumbnailComponent,
    NavBarComponent,
    EventDetailsComponent,
    CreateEventComponent,
    Error404Component
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    EventService, 
    ToastrService, 
    EventRouteActivator,
    EventListResolver,
    AuthService,
      {
        provide:'canDeactivateCreateEvent',
        useValue: checkDirtyState
      }
  ],
  bootstrap: [EventsAppComponent]
})
export class AppModule { }

export function checkDirtyState(component: CreateEventComponent){
  if(component.isDirty)
    return window.confirm('You have not saved this event, do you really want to cancel?')
  return true
}

The post Diving Deeper into Template Based 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.

Creating Your First Template based Form

bipon68 — Fri, 03 Jan 2020 04:58:37 +0000

Step 1: Create a component like login.component.html

Login


  
    
      User Name:
      
    
    
      Password:

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.

Handling form control Events in Angular

bipon68 — Thu, 12 Dec 2019 13:44:29 +0000

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


    
        Name

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

import { NgForm, NgModel } from '@angular/forms';

 onBlur(field: NgModel){
    console.log('in onBlur: ', field.valid)
}

The post Handling form control Events in Angular first appeared on Bipon's Diary.

Submitting form with class binding in Angular

bipon68 — Thu, 12 Dec 2019 12:39:38 +0000

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


    
        Name

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.

HTML5 Field Validation in Angular

bipon68 — Thu, 12 Dec 2019 09:48:35 +0000

HTML 5 Validation Attributes

required
pattern
minlength
maxlength
min
max

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


    
        Name

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


    
        Name

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


    
        Name

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


    
        Name

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

Angular Form Technologies

bipon68 — Wed, 11 Dec 2019 05:31:35 +0000

Template-driven Forms

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.