Angular 7, Reactive Forms, How to format Date as 'YYYY-MM-DD'?

Question

I need to send post data to an API server. I have a form and it has a date picker field. Now, If I send the data to the server, it sends the date formatted as such that the server rejects it.

Here is the representation of the whole data is sent:

{
  address: "Address",
  department: 1,
  dob: "1997-08-19T18:00:00.000Z",
  email: "chitholian@gmail.com",
  gender: "male",
  hall: 1,
  id: 16701016,
  name: "Atikur Rahman Chitholian",
  phone: "No phone number",
  religion: "islam",
  semester: 1,
  session: "2015 - 2016"
}

Here is the code for the component:

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {Department, Hall, Semester, Student} from '../custom/interfaces';
import {DepartmentService} from '../services/department.service';
import {MatSnackBar} from '@angular/material';
import {StudentService} from '../services/student.service';
import {Router} from '@angular/router';
import {DatePipe} from '@angular/common';

@Component({
  selector: 'app-student-reg',
  template: `
    <form class="panel" [formGroup]="form" (ngSubmit)="submit()">
      <mat-toolbar color="primary">Student Registration</mat-toolbar>
      <div class="panel-content of-hidden">
        <div class="col-1-2">
          <mat-form-field>
            <input matInput required type="number" placeholder="Student ID" [formControl]="id" name="id">
            <mat-error *ngIf="id.invalid">A valid Student ID is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput required placeholder="Full Name" [formControl]="name" name="name">
            <mat-error *ngIf="name.invalid">A valid Name is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-select [formControl]="gender" required placeholder="Gender">
              <mat-option *ngFor="let s of genders" [value]="s">{{s|titlecase}}</mat-option>
            </mat-select>
            <mat-error *ngIf="gender.invalid">Gender is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-select [formControl]="department" required placeholder="Department" (selectionChange)="onDeptChange()">
              <mat-option *ngFor="let d of departments" [value]="d.id">{{d.name}}</mat-option>
            </mat-select>
            <mat-error *ngIf="department.invalid">A department is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-select [disabled]="loading > 0 || department.invalid" [formControl]="semester" required placeholder="Semester">
              <mat-option *ngFor="let s of semesters" [value]="s.id">Semester {{s.number}}, Year {{s.year}}</mat-option>
            </mat-select>
            <mat-error *ngIf="semester.invalid">A semester is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-select [disabled]="loading > 0 || department.invalid || gender.invalid" [formControl]="hall" required placeholder="Hall">
              <ng-container *ngFor="let s of halls">
                <mat-option *ngIf="s.gender == gender.value" [value]="s.id">{{s.name}}</mat-option>
              </ng-container>
            </mat-select>
            <mat-error *ngIf="hall.invalid">Hall is required</mat-error>
          </mat-form-field>
        </div>
        <div class="col-1-2">
          <mat-form-field>
            <mat-select [formControl]="religion" required placeholder="Religion">
              <mat-option *ngFor="let s of religions" [value]="s">{{s|titlecase}}</mat-option>
            </mat-select>
            <mat-error *ngIf="religion.invalid">Religion is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <mat-select [formControl]="session" required placeholder="Session">
              <mat-option *ngFor="let s of sessions" [value]="s">{{s}}</mat-option>
            </mat-select>
            <mat-error *ngIf="session.invalid">Session is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input type="email" [formControl]="email" required matInput placeholder="Email" name="email">
            <mat-error *ngIf="email.invalid">A valid email address is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input [formControl]="phone" maxlength="20" required matInput placeholder="Phone" name="phone">
            <mat-error *ngIf="phone.invalid">A valid phone number is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput required [formControl]="dob" placeholder="Date of birth" [matDatepicker]="picker"
                   name="dob">
            <mat-datepicker-toggle #toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
            <mat-error *ngIf="dob.invalid">A valid date of birth is required</mat-error>
          </mat-form-field>
          <mat-form-field>
            <textarea matInput required cols="2" placeholder="Address" name="address" [formControl]="address"></textarea>
            <mat-error *ngIf="address.invalid">Address is required</mat-error>
          </mat-form-field>
        </div>
        <button mat-flat-button type="button" routerLink="/login/student">I have already registered</button>
        <button mat-raised-button type="submit" color="primary" class="float-right" [disabled]="loading > 0 || form.invalid">SUBMIT
        </button>
      </div>
    </form>
    {{form.value|json}}
  `,
  styles: []
})
export class StudentRegComponent implements OnInit {
  form: FormGroup;

  loading = 0;

  departments: Department[] = [];
  semesters: Semester[] = [];
  religions = ['islam', 'hinduism', 'christianity', 'buddhism', 'other'];
  genders = ['male', 'female', 'other'];
  sessions = [];
  halls: Hall[] = [];

  get id() {
    return this.form.get('id');
  }

  get semester() {
    return this.form.get('semester');
  }

  get department() {
    return this.form.get('department');
  }

  get hall() {
    return this.form.get('hall');
  }

  get name() {
    return this.form.get('name');
  }


  get gender() {
    return this.form.get('gender');
  }


  get session() {
    return this.form.get('session');
  }


  get phone() {
    return this.form.get('phone');
  }


  get email() {
    return this.form.get('email');
  }


  get address() {
    return this.form.get('address');
  }


  get dob() {
    return this.form.get('dob');
  }

  get religion() {
    return this.form.get('religion');
  }


  constructor(private fb: FormBuilder, private ds: DepartmentService, private router: Router, private ss: StudentService) {
    this.form = fb.group({
      id: fb.control('', Validators.pattern(/^[1-9]\d{7}$/)),
      name: fb.control('', Validators.required),
      department: fb.control('', Validators.required),
      hall: fb.control('', Validators.required),
      semester: fb.control('', Validators.required),
      gender: fb.control('', Validators.required),
      session: fb.control('', Validators.required),
      dob: fb.control('', Validators.required),
      religion: fb.control('', Validators.required),
      phone: fb.control('', Validators.required),
      email: fb.control('', [Validators.required, Validators.email]),
      address: fb.control('', Validators.required),
    });
  }


  ngOnInit() {
    this.loading++;
    this.loadDepartments();
    this.generateSessions();
  }

  submit() {
    this.loading++;
    this.ss.register(this.form.value).subscribe(
      res => {
        this.loading--;
        this.router.navigate(['/login/student/']);
      }, error1 => {
        console.log(error1);
        this.loading--;
      });
  }

  loadSemesters() {
    this.ds.getSemesters(this.department.value).subscribe(
      data => {
        this.semesters = data;
        this.loading--;
      }, error => {
        this.loading--;
      });
  }

  loadDepartments() {
    this.ds.getAllDepartments().subscribe(
      data => {
        this.departments = data;
        this.loading--;
      }, error => {
        this.loading--;
      });
  }

  loadHalls() {
    this.ds.getHalls(this.department.value).subscribe(
      data => {
        this.halls = data;
        this.loading--;
      }, error => {
        this.loading--;
      });
  }

  generateSessions() {
    for (let i = (new Date()).getFullYear(); i > 1966; i--) {
      this.sessions.push((i - 1) + ' - ' + i);
    }
  }

  onDeptChange() {
    this.loading += 2;
    this.loadSemesters();
    this.loadHalls();
  }
}

It is required that the date of birth ie dob is formatted as YYYY-MM-DD . How to achieve this ?

Answer 1

You can achieve that using Angular's Date Pipe

Had provided a Stackblitz Demo link as well for reference

@Component({
  ...,
  providers: [ DatePipe ]     // Add DatePipe from @angular/common
})
export class SampleComponent  {

   constructor(...,
               private datePipe: DatePipe) {}

   submit() {
     ...
     const body = this.form.value;
     body.dob   = this.datePipe.transform(body.dob, 'yyyy-MM-dd');  // You can provide any date format on the 2nd parameter

     this.ss.register(body).subscribe(res => {...});
}

Answer 2

You can have all the information about DatePipe options and configuration here .

You should config the datepipe to get something like this {{value_expression | date: 'yyyy/MM/dd'}} {{value_expression | date: 'yyyy/MM/dd'}}