title: Angular 7, Reactive Forms, How to format Date as 'YYYY-MM-DD'?
body: <p>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.</p>
  
  <p>Here is the representation of the whole data is sent:</p>
  
  <pre><code>{
    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"
  }
  </code></pre>
  
  <p>Here is the code for the component:</p>
  
  <pre><code>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: `
      &lt;form class="panel" [formGroup]="form" (ngSubmit)="submit()"&gt;
        &lt;mat-toolbar color="primary"&gt;Student Registration&lt;/mat-toolbar&gt;
        &lt;div class="panel-content of-hidden"&gt;
          &lt;div class="col-1-2"&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput required type="number" placeholder="Student ID" [formControl]="id" name="id"&gt;
              &lt;mat-error *ngIf="id.invalid"&gt;A valid Student ID is required&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput required placeholder="Full Name" [formControl]="name" name="name"&gt;
              &lt;mat-error *ngIf="name.invalid"&gt;A valid Name is required&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;mat-select [formControl]="gender" required placeholder="Gender"&gt;
                &lt;mat-option *ngFor="let s of genders" [value]="s"&gt;{{s|titlecase}}&lt;/mat-option&gt;
              &lt;/mat-select&gt;
              &lt;mat-error *ngIf="gender.invalid"&gt;Gender is required&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;mat-select [formControl]="department" required placeholder="Department" (selectionChange)="onDeptChange()"&gt;
                &lt;mat-option *ngFor="let d of departments" [value]="d.id"&gt;{{d.name}}&lt;/mat-option&gt;
              &lt;/mat-select&gt;
              &lt;mat-error *ngIf="department.invalid"&gt;A department is required&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;mat-select [disabled]="loading &gt; 0 || department.invalid" [formControl]="semester" required placeholder="Semester"&gt;
                &lt;mat-option *ngFor="let s of semesters" [value]="s.id"&gt;Semester {{s.number}}, Year {{s.year}}&lt;/mat-option&gt;
              &lt;/mat-select&gt;
              &lt;mat-error *ngIf="semester.invalid"&gt;A semester is required&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;mat-select [disabled]="loading &gt; 0 || department.invalid || gender.invalid" [formControl]="hall" required placeholder="Hall"&gt;
                &lt;ng-container *ngFor="let s of halls"&gt;
                  &lt;mat-option *ngIf="s.gender == gender.value" [value]="s.id"&gt;{{s.name}}&lt;/mat-option&gt;
                &lt;/ng-container&gt;
              &lt;/mat-select&gt;
              &lt;mat-error *ngIf="hall.invalid"&gt;Hall is required&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;div class="col-1-2"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-select [formControl]="religion" required placeholder="Religion"&gt;
                &lt;mat-option *ngFor="let s of religions" [value]="s"&gt;{{s|titlecase}}&lt;/mat-option&gt;
              &lt;/mat-select&gt;
              &lt;mat-error *ngIf="religion.invalid"&gt;Religion is required&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;mat-select [formControl]="session" required placeholder="Session"&gt;
                &lt;mat-option *ngFor="let s of sessions" [value]="s"&gt;{{s}}&lt;/mat-option&gt;
              &lt;/mat-select&gt;
              &lt;mat-error *ngIf="session.invalid"&gt;Session is required&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input type="email" [formControl]="email" required matInput placeholder="Email" name="email"&gt;
              &lt;mat-error *ngIf="email.invalid"&gt;A valid email address is required&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input [formControl]="phone" maxlength="20" required matInput placeholder="Phone" name="phone"&gt;
              &lt;mat-error *ngIf="phone.invalid"&gt;A valid phone number is required&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;input matInput required [formControl]="dob" placeholder="Date of birth" [matDatepicker]="picker"
                     name="dob"&gt;
              &lt;mat-datepicker-toggle #toggle matSuffix [for]="picker"&gt;&lt;/mat-datepicker-toggle&gt;
              &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
              &lt;mat-error *ngIf="dob.invalid"&gt;A valid date of birth is required&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
            &lt;mat-form-field&gt;
              &lt;textarea matInput required cols="2" placeholder="Address" name="address" [formControl]="address"&gt;&lt;/textarea&gt;
              &lt;mat-error *ngIf="address.invalid"&gt;Address is required&lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;button mat-flat-button type="button" routerLink="/login/student"&gt;I have already registered&lt;/button&gt;
          &lt;button mat-raised-button type="submit" color="primary" class="float-right" [disabled]="loading &gt; 0 || form.invalid"&gt;SUBMIT
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      {{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 =&gt; {
          this.loading--;
          this.router.navigate(['/login/student/']);
        }, error1 =&gt; {
          console.log(error1);
          this.loading--;
        });
    }
  
    loadSemesters() {
      this.ds.getSemesters(this.department.value).subscribe(
        data =&gt; {
          this.semesters = data;
          this.loading--;
        }, error =&gt; {
          this.loading--;
        });
    }
  
    loadDepartments() {
      this.ds.getAllDepartments().subscribe(
        data =&gt; {
          this.departments = data;
          this.loading--;
        }, error =&gt; {
          this.loading--;
        });
    }
  
    loadHalls() {
      this.ds.getHalls(this.department.value).subscribe(
        data =&gt; {
          this.halls = data;
          this.loading--;
        }, error =&gt; {
          this.loading--;
        });
    }
  
    generateSessions() {
      for (let i = (new Date()).getFullYear(); i &gt; 1966; i--) {
        this.sessions.push((i - 1) + ' - ' + i);
      }
    }
  
    onDeptChange() {
      this.loading += 2;
      this.loadSemesters();
      this.loadHalls();
    }
  }
  </code></pre>
  
  <p>It is required that the <code>date of birth</code> i.e. <code>dob</code> is formatted as <code>YYYY-MM-DD</code>. How to achieve this ?</p>