angular - 反应形式角。Mat Date Picker 不会将日期发送到 Firebase

问题描述

我创建了以下反应形式，并且“contractDate”不会将日期推送到 Fire base。

其他一切都按预期工作。有人可以指出我正确的方向，代码有什么问题吗？

只是为了添加当我将（formControlName =“contractDate”）更改为“contractDate”以外的任何内容时，firebase中的列已发送但为空。

客户端组件的 HTML

<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>

客户端.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'));
  }
}

非常感谢您提前。

标签： angularfirebaseangular-material

angular - 反应形式角。Mat Date Picker 不会将日期发送到 Firebase

问题描述

解决方案

推荐阅读