Как отправить 2 даты в angular 4+ с реактивными формами с помощью 2 mat-datepicker в html

Question

Мне нужно отправить 2 разные даты внутри моей формы в firebase, используя угловые реактивные формы с formBuilder со строковым форматом, но когда я отправляю форму и консоль, первая дата сохраняется в виде строки, но вторая дата все еще является объектом, поэтому firebase не может запомни, пожалуйста, я новичок в угловом

student.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { FormBuilder, Validators, FormControl } from '@angular/forms';

export interface StudentFrom{
  name: string,
  address: string,
  bd:string,
  phone?: string,
  fphone?:string,
  schoolYear: number,
  fb?: string,
  ffb?:string,
  img?:string,
  gender: number,
  ziacon: boolean,
  ziaconDeg?: string,
  ziaconYear?:string
}
@Injectable({
  providedIn: 'root'
})
export class StudentsService {
  studentForm;
  bdate = new FormControl(Date.toString());
  diacondate = new FormControl((new Date()).toISOString());
  constructor(private db : AngularFireDatabase
    ,private fb: FormBuilder) {
      this.studentForm = this.fb.group({
        key: null,
        name: [''],
        address: [''],
        bd: [],
        phone: [''],
        fphone:[''],
        khoras: [''],
        father: [''],
        schoolYear: [0],
        fb: [''],
        ffb:[''],
        img:[''],
        gender: [1],
        diacon: fb.group({
          isDiacon: [false],
          diaconDeg: [''],
          diaconYear:[]
        })
      })
     }
  create(student){
    this.db.list('/students').push(student);
    console.log(student)
  }
  initForm(){
        this.studentForm.setValue({
        key: null,
        name: '',
        address: '',
        bd: '',
        phone: '',
        fphone:'',
        khoras: '',
        father: '',
        schoolYear: 0,
        fb: '',
        ffb:'',
        img:'',
        gender: 1,
        diacon: {
          isDiacon: false,
          diaconDeg: 'option1',
          diaconYear:''
        },
        })
  }
  get(){
    return this.db.list('/students').snapshotChanges();
  }
  delete(key){
    this.db.object('/students/' + key).remove();
  }
}

student-form.component.ts

import { Component, OnInit } from '@angular/core';
import { StudentsService } from 'src/app/services/students.service';
import { ListsService } from 'src/app/services/lists.service';
import { Router } from '@angular/router';
import { Form } from '@angular/forms';
import { DateStringService } from 'src/app/services/date-string.service';



@Component({
  selector: 'app-student-form',
  templateUrl: './student-form.component.html',
  styleUrls: ['./student-form.component.scss']
})
export class StudentFormComponent implements OnInit {
  panelOpenState = true;
  schoolYears$;
  fathers$;
  khoras$;
  checked = false;
  selectedZeiacon = 'option1'
  constructor(
    private ss: StudentsService,
    private ls: ListsService,
    private router: Router,
    public ds: DateStringService
  ) { }

  ngOnInit() {
    this.schoolYears$ = this.ls.getSchoolYears();
    this.fathers$ = this.ls.getFathers();
    this.khoras$ = this.ls.getKhoras();
    this.ss.initForm()
  }
  ziakon(){
    this.checked = !this.checked;
  }
   /* Date */
   date(e) {
    var convertDiaconDate = new Date(e.target.value).toISOString().substring(0, 10);
    this.ss.studentForm.get('bd').setValue(convertDiaconDate, {
        onlyself: true
      })
  }

  diacondate(e) {
    var convertDate = new Date(e.target.value).toISOString().substring(0, 10);
    this.ss.studentForm.get('diaconYear').setValue(convertDate, {
        onlyself: true
      })
  }
  submit(){
    this.ss.create(this.ss.studentForm.value);
    this.router.navigate(['/students'])
    this.ss.initForm();
  }

}

student-form.component.html

<div class="p-3 rtl">
    <div class="custom-box">
        <header>
            <h4>البيانات الشخصية</h4>
        </header>
        <div class="custom-box-body p-3">
            <form [formGroup]="ss.studentForm" (ngSubmit)="submit()" class="row">


                <div class="col-md-4">
                    <mat-form-field class="text-right">
                        <input formControlName="bd" (dateChange)="date($event)" matInput [matDatepicker]="bdpicker" (click)="bdpicker.open()" (focus)="bdpicker.open()" placeholder="تاريخ الميلاد">
                        <mat-datepicker-toggle matSuffix [for]="bdpicker"></mat-datepicker-toggle>
                        <mat-datepicker #bdpicker></mat-datepicker>
                    </mat-form-field>
                </div>

                <div class="col-12 row" formGroupName="diacon">
                    <div class="col-md-12 text-right">
                        <mat-slide-toggle
                            formControlName="isDiacon"
                            [(checked)]='checked'
                            (change)='ziakon()'
                        > diacon? </mat-slide-toggle>
                    </div>
                    <div class="col-md-4" *ngIf="checked">
                        <mat-form-field class="text-right">
                            <input formControlName="diaconYear" (dateChange)="diacondate($event)" matInput [matDatepicker]="ziakonpicker" (click)="ziakonpicker.open()" (focus)="ziakonpicker.open()" placeholder="diacon date">
                            <mat-datepicker-toggle matSuffix [for]="ziakonpicker"></mat-datepicker-toggle>
                            <mat-datepicker #ziakonpicker></mat-datepicker>
                        </mat-form-field>
                    </div>
                </div>
                <div class="col-12 text-left mt-3">
                    <button mat-raised-button color="warn">save</button>
                </div>
            </form>
        </div>
    </div>
</div>

если есть лучший код, пожалуйста, помогите мне с этим большое спасибо