Значение Datepicker для Materialie CSS не существует в форме управления Agular 8

Question

Я делаю домашний проект на Angular 8 с Materialise CSS.По разным причинам я использую CDN Materialise.Я использую Firebase для хранения данных.

В моем проекте есть админ-панель с авторизацией на входе и защитой маршрутизатора (с Angular Fire).

На админ-панели есть раздел ADD / EDIT, где Music Toursможет быть добавлен / отредактирован в базу данных.

Я использовал FormBuilder для своей формы.

this.addForm = this.formBuilder.group({
      tourDate: ['', [Validators.required]],
      tourTime: ['', [Validators.required]],
      tourCity: ['', [Validators.required, Validators.minLength(2)]],
      tourVenue: ['', [Validators.required, Validators.minLength(2)]],
      ticketLink: ['', [Validators.required, Validators.minLength(10)]],
    })

Когда я использую дату в качестве типа ввода, я могу получить доступ к значению поля черезFormControl.Я могу отправить форму, и она без проблем сохранится в базе данных.

<input formControlName="tourDate" id="tour_date" type="date">

Когда я использую текст в качестве типа и средство выбора даты в качестве класса, значение поля в форме управления пустое (иэто также нетронутый)

<input formControlName="tourDate" id="tour_date" type="text" class="datepicker">

Форма управления в консоли:

tourDate: FormControl
asyncValidator: null
errors: {required: true}
pristine: true
status: "INVALID"
statusChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
touched: true
validator: ƒ (control)
value: ""

Если я использую

console.log(document.getElementById('tour_date').value);

, тогда я могу записать значение.

Это мой шаблон (только часть ввода даты):

<app-tourmaster-header></app-tourmaster-header>

<div class="container">
  <div class="card">
    <div class="card-content">
      <span class="card-title">Add Tour</span>
      <!-- FORM -->

      <div class="row">
        <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)" class="col s12">
          <!-- DATE INPUT -->
          <div class="row">
            <div class="input-field col s12">
              <input formControlName="tourDate" id="tour_date" type="text" class="datepicker">
              <label for="tour_date">Tour Date</label>
              <span *ngIf="!f.tourDate.touched" class="helper-text">You can not use past dates!</span>
              <span *ngIf="f.tourDate.touched && f.tourDate.errors && f.tourDate.errors.required"
                class="helper-text red-text">Tour Date required</span>
            </div>
          </div>
          <button class="btn waves-effect waves-light" type="submit" name="action">Add Tour</button>
          <a routerLink="/tourmaster/main" class="btn right">Back Without Adding</a>
        </form>
      </div>
  </div>
</div>

Это мой файл .ts:

import { Component, OnInit } from '@angular/core';
import { Tour } from 'src/app/models/Tour';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { TourService } from 'src/app/services/tour.service';
import { Router } from '@angular/router';
declare var $: any;

const newTour: Tour = {
  id: '',
  tourDate: 0,
  tourCity: '',
  tourVenue: '',
  ticketLink: '',
  isExpired: false,
  isCancelled: false,
  isUpdated: false,
};


@Component({
  selector: 'app-tourmaster-add',
  templateUrl: './tourmaster-add.component.html',
  styleUrls: ['./tourmaster-add.component.css']
})
export class TourmasterAddComponent implements OnInit {
  addForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private tourService: TourService,
    private router: Router,

  ) { }

  ngOnInit() {
    $(document).ready(function () {
      $('.datepicker').datepicker();
      $('.timepicker').timepicker();
    });



    this.addForm = this.formBuilder.group({
      tourDate: ['', [Validators.required]],
      tourTime: ['', [Validators.required]],
      tourCity: ['', [Validators.required, Validators.minLength(2)]],
      tourVenue: ['', [Validators.required, Validators.minLength(2)]],
      ticketLink: ['', [Validators.required, Validators.minLength(10)]],
    })

  }

  // convenience getter for easy access to form fields
  get f() { return this.addForm.controls; }

  onSubmit(value: any) {

    // console.log(this.addForm.controls);
    // console.log(document.getElementById('tour_date').value);

    if (this.addForm.invalid) {
      alert('the form is invalid');
    } else if (new Date(value.tourDate) < new Date()) {
      alert('The date can't be a past date');
    } else {

      //Add new client

      newTour.tourDate = new Date(`${value.tourDate} ${value.tourTime}`).getTime();
      newTour.tourCity = value.tourCity;
      newTour.tourVenue = value.tourVenue;
      newTour.ticketLink = value.ticketLink;

      this.tourService.addTour(newTour);

      //redirect to tourmaster main
      this.router.navigate(['/tourmaster/main']);
    }

  }
}