Question

我已经创建了以下响应式表单，“ 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>

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

非常感谢您。

Answer 1

首先，非常感谢Ashot向我指出正确的方向！

要将日期选择器添加到firebase中，您必须格式化日期。步骤如下。

首先将DatePipe添加到app.module.ts提供程序数组中。

然后将DatePipe注入到service.ts中的构造函数中

最后是用DatePipe更新功能，其中日期选择器正在更新/插入日期。像这样的东西：this.datePipe.transform（clients.contractDate，'yyyy-MM-dd'）

谢谢！

Answer 2

请您将!important更改为private service: ClientsService并重试
您需要将什么日期发送到Firebase？日期选择器以类似public service: ClientsService

Answer 3

您可以尝试此

以此替换您的输入 <input (dateChange)="onSelectContractDate($event)" matInput [matDatepicker]="picker" placeholder="Contract Date">
在您的ts中，从“ @ angular / common”导入DatePipe并将其添加到构造函数中
private datePipe: DatePipe
并将此函数放入ts

onSelectContractDate(event) {
const firebaseDate = this.datePipe.transform(event.value, 'YYYY-MM-DD');
this.service.form.get('contractDate').patchValue(firebaseDate);
}

Answer 4

或者您可以从Firebase中将.toDate()添加到您的日期

this question

Answer 5

尝试 contractDate：clients.contractDate.toJSON（），

而不是 contractDate：clients.contractDate，

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

5 个答案: