Question

我正在用Materialize CSS在Angular 8中制作一个家庭项目。由于各种原因，我使用Materialize CDN。我使用Firebase来存储数据。

我的项目有一个具有登录授权和路由器防护（使用Angular Fire）的管理面板。

管理面板上有一个“添加/编辑”部分，可以在其中将“音乐游览”添加/编辑到数据库中。

我将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)]],
    })

当我使用date作为输入类型时，我可以通过formcontrol访问该字段的值。我可以提交表单并将其毫无问题地保存在数据库中。

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

当我使用文本作为类型并将日期选择器用作类时，formcontrol中的字段值为空（也为原始）

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

控制台中的formcontrol：

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']);
    }

  }
}

Materialie CSS的Datepicker的值不存在于Agular 8的formbuilder的formcontol中

0 个答案: