Materalize CSS Datepicker является пустым в ReactiveForms

Question

Я использую Materialise CSS в своем приложении Angular. Я сейчас настраиваю страницу регистрации с входами. Я хочу использовать Datepicker, чтобы выбрать дату рождения для пользователя. Когда я добавляю Datepicker, я могу выбрать дату, но когда я отправляю форму, этот ввод возвращается как пустой.

Я использую Materialize CSS 0.100.2, и я также пытался использовать Materialize 1.0.0 Beta, но оба не передают значение ввода даты. Я заметил, что в документах говорится: «Укажите элемент DOM для отображения календаря, по умолчанию он будет помещен перед входом». используя опцию «содержать», но я не уверен, правильно ли это.

Фрагмент HTML:

<form [formGroup]="formGroup">
  <div class="card-content">
    <span class="card-title">Your Personal Details</span>
    <p>
      Please Enter Your Personal Details As Per Your ID Or Passport.
      <a href="#">Why?</a>
    </p>
    <div class="input-field">
      <i class="material-icons prefix">person</i>
      <input
        id="firstName"
        type="text"
        placeholder="John"
        formControlName="firstName"
      />
      <label for="firstName" data-error="wrong" class="active"
        >First Name</label
      >
    </div>
    <div class="input-field">
      <i class="material-icons prefix">people</i>
      <input
        id="firstName"
        type="text"
        placeholder="Doe"
        formControlName="lastName"
      />
      <label for="firstName" data-error="wrong" class="active">Last Name</label>
    </div>
    <div class="input-field">
      <i class="material-icons prefix">date_range</i>
      <input
        id="dateOfBirth"
        type="text"
        placeholder="26 March 2019"
        formControlName="dateOfBirth"
      />
      <label for="dateOfBirth" data-error="wrong" class="active"
        >Date Of Birth</label
      >
    </div>
    <div class="input-field">
      <i class="material-icons prefix">mail</i>
      <input
        id="email"
        type="email"
        placeholder="john.doe@propertyin.africa"
        formControlName="email"
      />
      <label for="email" data-error="wrong" class="active">Email Address</label>
    </div>
    <div class="input-field">
      <i class="material-icons prefix">lock</i>
      <input
        id="password"
        type="password"
        placeholder="*******"
        formControlName="password"
      />
      <label for="password" data-error="wrong" class="active">Password</label>
    </div>
  </div>
  <div class="card-action">
    <a
      class="waves-effect waves-blue btn-flat blue-text grey lighten-4"
      [routerLink]="['/account/sign/in']"
      >Sign Up Rather</a
    >
    <a
      class="waves-effect waves-blue btn blue"
      (click)="signUp(formGroup.value)"
      >Sign Up</a
    >
  </div>
</form>

TS

  formGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) { 
    this.formGroup = this.formBuilder.group({
      firstName: ['', Validators.required ],
      lastName: ['', Validators.required ],
      dateOfBirth: ['', Validators.required ],
      email: ['', Validators.required ],
      password: ['',Validators.required],
    });
  }

  ngOnInit() {
    $(document).ready(function(){
      $('#dateOfBirth').datepicker({
        format: 'dd mmmm yyyy',
        autoClose: true
      })
    });
  }

  signUp(user) {
    console.log(user);
  }

Я ожидаю, что результат будет {firstName: "Fiskani", lastName: "Chirwa", dateOfBirth: "26 March 2019", email: "fiskani.chirwa@gmail.com", password: "password"}

Но я получаю {firstName: "Fiskani", lastName: "Chirwa", dateOfBirth: "", email: "fiskani.chirwa@gmail.com", password: "password"}

Answer 1

Я имел дело с той же проблемой, используя материализованный DatePicker в версии 1.0.0 и никогда не нашел решения с их DatePicker. Вместо этого я должен был использовать Angular Material Datepicker , и он работал как ожидалось.