1 view

Diving Deeper into Reactive Forms

bipon68Angular Form

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

<div class="col-md-12">
    <h3>Create Session</h3>
  </div>
  <div class="col-md-6">
    <form [formGroup]="newSessionForm" (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
      <div class="form-group">
        <label for="sessionName">Session Name:</label>
        <input id="sessionName" type="text" class="form-control" placeholder="session name..." />
      </div>
      <div class="form-group">
        <label for="eventDate">Presenter:</label>
        <input id="presenter" type="text" class="form-control" placeholder="presenter..." />
      </div>
      <div class="form-group">
        <label for="duration">Duration:</label>
        <select class="form-control">
          <option value="">select duration...</option>
          <option value="1">Half Hour</option>
          <option value="2">1 Hour</option>
          <option value="3">Half Day</option>
          <option value="4">Full Day</option>
        </select>
      </div>
      <div class="form-group">
        <label for="level">Level:</label>
        <select class="form-control">
          <option value="">select level...</option>
          <option value="Beginner">Beginner</option>
          <option value="Intermediate">Intermediate</option>
          <option value="Advanced">Advanced</option>
        </select>
      </div>
      <div class="form-group">
        <label for="abstract">Abstract:</label>
        <textarea id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
      </div>
      <button type="submit" class="btn btn-primary mr-5">Save</button>
      <button type="button" class="btn btn-default">Cancel</button>
    </form>
  </div>

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

<div class="col-md-12">
    <h3>Create Session</h3>
  </div>
  <div class="col-md-6">
    <form [formGroup]="newSessionForm" (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
      <div class="form-group">
        <label for="sessionName">Session Name:</label>
        <input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." />
      </div>
      <div class="form-group">
        <label for="eventDate">Presenter:</label>
        <input id="presenter" type="text" class="form-control" placeholder="presenter..." />
      </div>
      <div class="form-group">
        <label for="duration">Duration:</label>
        <select formControlName="duration" class="form-control">
          <option value="">select duration...</option>
          <option value="1">Half Hour</option>
          <option value="2">1 Hour</option>
          <option value="3">Half Day</option>
          <option value="4">Full Day</option>
        </select>
      </div>
      <div class="form-group">
        <label for="level">Level:</label>
        <select formControlName="level" class="form-control">
          <option value="">select level...</option>
          <option value="Beginner">Beginner</option>
          <option value="Intermediate">Intermediate</option>
          <option value="Advanced">Advanced</option>
        </select>
      </div>
      <div class="form-group">
        <label for="abstract">Abstract:</label>
        <textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
      </div>
      <button type="submit" class="btn btn-primary mr-5">Save</button>
      <button type="button" class="btn btn-default">Cancel</button>
    </form>
  </div>

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

<div class="col-md-12">
    <h3>Create Session</h3>
  </div>
  <div class="col-md-6">
    <form [formGroup]="newSessionForm" (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
      <div class="form-group" [ngClass]="{'error': name.invalid && name.dirty}">
        <label for="sessionName">Session Name:</label>
        <em *ngIf="name.invalid && name.dirty">Required</em>
        <input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." />
      </div>
      <div class="form-group" [ngClass]="{'error': presenter.invalid && presenter.dirty}">
        <label for="eventDate">Presenter:</label>
        <em *ngIf="presenter.invalid && presenter.dirty">Required</em>
        <input formControlName="presenter" id="presenter" type="text" class="form-control" placeholder="presenter..." />
      </div>
      <div class="form-group" [ngClass]="{'error': duration.invalid && duration.dirty}">
        <label for="duration">Duration:</label>
        <em *ngIf="duration.invalid && duration.dirty">Required</em>
        <select formControlName="duration" class="form-control">
          <option value="">select duration...</option>
          <option value="1">Half Hour</option>
          <option value="2">1 Hour</option>
          <option value="3">Half Day</option>
          <option value="4">Full Day</option>
        </select>
      </div>
      <div class="form-group" [ngClass]="{'error': level.invalid && level.dirty}">
        <label for="level">Level:</label>
        <em *ngIf="level.invalid && level.dirty">Required</em>
        <select formControlName="level" class="form-control">
          <option value="">select level...</option>
          <option value="Beginner">Beginner</option>
          <option value="Intermediate">Intermediate</option>
          <option value="Advanced">Advanced</option>
        </select>
      </div>
      <div class="form-group" [ngClass]="{'error': abstract.invalid && abstract.dirty}">
        <label for="abstract">Abstract:</label>
        <em *ngIf="abstract.invalid && abstract.dirty && abstract?.errors.required">Required</em>
        <em *ngIf="abstract.invalid && abstract.dirty && abstract?.errors.maxlength">Cannot exceed 400 character</em>
        <textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
      </div>
      <button [disabled]="newSessionForm.invalid" type="submit" class="btn btn-primary mr-5">Save</button>
      <button type="button" class="btn btn-default">Cancel</button>
    </form>
  </div>

Leave a Reply