Reactive Form Angular. Mat Date Picker does not sent the date to Firebase

Question

I have created the below reactive form and the "contractDate" doesn't push the date to Fire base.

Everything else is working as expected. Can someone please point me in the right direction what is wrong with the code?

Just to add when I change the (formControlName="contractDate") to anything else than "contractDate", the column in firebase is sent but empty.

HTML for client component

<form [formGroup]="service.form" class="normal-form" (submit)="onSubmit()">
    <mat-grid-list cols="2" rowHeight="400px">
        <mat-grid-tile>
          <div class="controles-container">
            <input type="hidden" formControlName="$key">
            <mat-form-field>
              <input formControlName="fullName" matInput placeholder="Full Name">
              <mat-error>Full Name is missing</mat-error>
            </mat-form-field>
            <mat-form-field>
              <input formControlName="email" matInput placeholder="Email">
              <mat-error>Email is missing</mat-error>
            </mat-form-field>
            <mat-form-field>
              <input formControlName="mobile" matInput placeholder="Mobile">
              <mat-error *ngIf="service.form.controls['mobile'].errors?.required">Mobile is missing.</mat-error>
              <mat-error *ngIf="service.form.controls['mobile'].errors?.minlength">Minimum 8 charactors needed.</mat-error>
            </mat-form-field>
            <mat-form-field>
              <input formControlName="address" matInput placeholder="Address">
              <mat-error>Address is missing</mat-error>
            </mat-form-field>
          </div>
        </mat-grid-tile>
        <mat-grid-tile>
          <div class="controles-container1">
            <mat-form-field>
              <mat-select formControlName="location" matInput placeholder="Location">
                <mat-option>None</mat-option>
                <ng-container *ngFor="let location of locationService.array">
                  <mat-option value="{{location.$key}}">{{location.name}}</mat-option>
                </ng-container>
              </mat-select>
            </mat-form-field>
            <mat-form-field>
              <input formControlName="contractDate" matInput [matDatepicker]="picker" placeholder="Contract Date">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>
            <div class="add-bottom-padding">
                <mat-radio-group formControlName="gender">
                  <mat-radio-button value="1">Male</mat-radio-button>
                  <mat-radio-button value="2">Female</mat-radio-button>
                  <mat-radio-button value="3">Other</mat-radio-button>
                </mat-radio-group>
              </div>
            <div>
            <mat-form-field class="add-bottom-padding" appearance="outline">
              <textarea formControlName="notes" matInput placeholder="Notes"></textarea>
            </mat-form-field>
          </div>
          <div class="button-row">
            <button mat-raised-button color="primary" type="submit" [disabled]="service.form.invalid" >Save</button>
            <button mat-raised-button color="warn" (click)="onClear()">Clear</button>
          </div>
          </div>
        </mat-grid-tile>
      </mat-grid-list>
</form>

clients.component.ts

import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material';

import { ClientsService } from 'src/app/shared/clients.service';
import { LocationService } from 'src/app/shared/location.service';
import { NotificationService } from 'src/app/shared/notification.service';



@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {

  constructor(private service: ClientsService,
              private locationService: LocationService,
              private notificationService: NotificationService,
              public  dialogRef: MatDialogRef<ClientsComponent>) { }

  ngOnInit() {
    this.service.getClients();
  }

  onClear() {
    this.service.form.reset();
    this.service.initializeFormGroup();
  }

  onSubmit() {
    if (this.service.form.valid) {
      this.service.insertClients(this.service.form.value);
      this.service.form.reset();
      this.service.initializeFormGroup();
      this.notificationService.sucess('Saved successfully!');
      this.onClose();
    }
  }

  onClose(){
    this.service.form.reset();
    this.service.initializeFormGroup();
    this.dialogRef.close();
  }
}

clients.service.component.ts

import { Injectable } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import * as _ from 'lodash';

@Injectable({
  providedIn: 'root'
})
export class ClientsService {

  constructor(private firebase: AngularFireDatabase) { }

  clientsList: AngularFireList<any>;

  form: FormGroup = new FormGroup({
    $key: new FormControl(null),
    fullName: new FormControl('', Validators.required),
    email: new FormControl('', Validators.email),
    mobile: new FormControl('', [Validators.required, Validators.minLength(8)]),
    address: new FormControl('', Validators.required),
    gender: new FormControl('3'),
    location: new FormControl(0, Validators.required),
    contractDate: new FormControl(''),
    notes: new FormControl (''),
});

initializeFormGroup() {
  this.form.setValue({
    $key: null,
    fullName: '',
    email: '',
    mobile: '',
    address: '',
    gender: '3',
    location: '',
    contractDate: '',
    notes: '',
  });
}

getClients() {
  this.clientsList = this.firebase.list('clients');
  return this.clientsList.snapshotChanges();
}

insertClients(clients) {
  this.clientsList.push({
    fullName: clients.fullName,
    email: clients.email,
    mobile: clients.mobile,
    address: clients.address,
    gender: clients.gender,
    location: clients.location,
    contractDate: clients.contractDate,
    notes: clients.notes
  });
}

updateClients(clients) {
  this.clientsList.update(clients.$key,
    {
      fullName: clients.fullName,
      email: clients.email,
      mobile: clients.mobile,
      address: clients.address,
      gender: clients.gender,
      location: clients.location,
      contractDate: clients.contractDate,
      notes: clients.notes

    });
  }

  deleteClients($key: string) {
    this.clientsList.remove($key);
  }

  populateForm(clients: any) {
    this.form.setValue(_.omit(clients, 'locationName'));
  }
}

Thank you very much in advance.

Answer 1

try contractDate: clients.contractDate.toJSON(),

instead of contractDate: clients.contractDate,

Answer 2

Or you can add .toDate() to your date from Firebase

doc

Answer 3

First of all BIG thank you to Ashot for pointing me in the right direction!

To add the date picker to firebase you have to format the date. Steps below.

First add DatePipe to app.module.ts providers array.

Then inject the DatePipe to constructor in your service.ts

Last thing is to update functions with DatePipe, where your date picker is updating/ inserting date. Something like: this.datePipe.transform(clients.contractDate, 'yyyy-MM-dd')

Thanks!

Answer 4

you can try this one to

1. replace your input with this <input (dateChange)="onSelectContractDate($event)" matInput [matDatepicker]="picker" placeholder="Contract Date">
2. in your ts import DatePipe from '@angular/common' and add it into constructor
3. private datePipe: DatePipe
4. and put this function into your ts

onSelectContractDate(event) {
const firebaseDate = this.datePipe.transform(event.value, 'YYYY-MM-DD');
this.service.form.get('contractDate').patchValue(firebaseDate);
}

Answer 5

1. Please can you change the private service: ClientsService to public service: ClientsService and try again
2. And What date you need to send to the firebase? The datepicker returns the Date in string format like this Mon Nov 11 2019 00:00:00 GMT+0400 (Armenia Standard Time)