Question

我试图在将ngbDatepicker日期格式转换为字符串之前调用后端API来保存数据，因为它仅允许日期格式为字符串。我尝试使用submittedData.MaturityDate.toString();和submittedData.RemitDate.toString();进行转换，但无法正常工作。

我目前在component.html中有此表格：

<div class="form-group row">
            <div class="col-sm-6">
              <label for="MaturityDate">Maturity Date</label>
              <div class="input-group">
                <input formControlName="MaturityDate" class="form-control" placeholder="yyyy-mm-dd" name="dp1"
                  ngbDatepicker #dp1="ngbDatepicker" [ngClass]="{ 'is-invalid': submitted && f.MaturityDate.errors }">
                <div class="input-group-append">
                  <button class="btn btn-outline-secondary calendar" (click)="dp1.toggle()" type="button"></button>
                </div>
                <div *ngIf="submitted && !!f.MaturityDate.errors" class="invalid-feedback">
                  <div *ngIf="!!f.MaturityDate.errors.required">Maturity date is required</div>
                </div>
              </div>
            </div>

            <div class="col-sm-6">
              <label for="RemitDate">Remittance Date</label>
              <div class="input-group">
                <input formControlName="RemitDate" class="form-control" placeholder="yyyy-mm-dd" name="dp2"
                  ngbDatepicker #dp2="ngbDatepicker" [ngClass]="{ 'is-invalid': submitted && f.RemitDate.errors }">
                <div class="input-group-append">
                  <button class="btn btn-outline-secondary calendar" (click)="dp2.toggle()" type="button"></button>
                </div>
                <div *ngIf="submitted && !!f.RemitDate.errors" class="invalid-feedback">
                  <div *ngIf="!!f.RemitDate.errors.required">Remittance date is required</div>
            </div>
        </div>
    </div>
</div>

提交此表单后，我将在我的component.ts中触发以下内容：

onSubmit() {
    this.submitted = true;

    // stop here if form is invalid
    if (this.accountPayableForm.invalid) {
      return;
    }

    let submittedData = this.accountPayableState;
    submittedData = this.accountPayableForm.value;

    // **TRYING TO CONVERT INPUT TO STRING BUT NOT WORKING
    submittedData.MaturityDate.toString();
    submittedData.RemitDate.toString();
    submittedData.OwningAccountKey = this.currentAccount[0].accountId;

    console.log(submittedData);

    this.loading = true;
    this.accountPayableService
      .submitAccountPayable(submittedData)
      .pipe(first())
      .subscribe(
        (data: AccountPayable) => {
          this.alertService.success(
            'Success! Account payable created with reference ID: ' + data.accountPayableID,
            true
          );
          this.loading = false;
          this.submitted = false;
          this.accountPayableForm.reset();
          document.querySelector('.my-scroll').scrollTo(0, 0);
        },
        error => {
          document.querySelector('.my-scroll').scrollTo(0, 0);
          this.alertService.error('Submission failed, please try again');
          this.loading = false;
        }
      );
  }

这是我的submitAccountPayable()中的service.ts函数：

submitAccountPayable(accountPayable: AccountPayableState) {
    return this.http.post(this.issueAccountPayableUrl, accountPayable);
  }

我的MaturityDate模型中的RemitDate和AccountPayableState属性为字符串格式，因此我认为当我调用此函数时，它们会自动映射为字符串格式。这是我的AccountPayableState模型：

export interface AccountPayableState {
  OwningAccountKey: string;
  BuyerAccount: string;
  BuyerCode: number;
  SupplierAccount: string;
  SupplierCode: number;
  PaymentReference: string;
  MaturityDate: string;
  RemitDate: string;
  PaymentAmount: number;
  PaymentCurrency: string;
  PurchaseOrderNumber: string;
}

这是我在控制台中用于样本提交的有效负载，即使我专门使用了.toString()，显然它们也不是字符串类型。请参阅下面的MaturityDate和RemitDate：

BuyerAccount: "asdasdasd"
BuyerCode: "123123"
MaturityDate: {year: 2019, month: 10, day: 18}
OwningAccountKey: "e273b89f-c828-41ad-873d-a13bbe63d7c5"
PaymentAmount: "123123123"
PaymentCurrency: "USD"
PaymentReference: "asdasda"
PurchaseOrderNumber: "asdasda"
RemitDate: {year: 2019, month: 10, day: 10}
SupplierAccount: "asdasdasda"
SupplierCode: "123123123"

有什么建议吗？

Answer 1

您只需使用函数即可更改日期；

private dateToString = (date) => `${date.year}-${date.month}-${date.day}`; 

onSubmit() {
    this.submitted = true;

    // stop here if form is invalid
    if (this.accountPayableForm.invalid) {
      return;
    }

    let submittedData = this.accountPayableState;
    submittedData = this.accountPayableForm.value;

    submittedData.MaturityDate = this.dateToString(submittedData.MaturityDate);
    submittedData.RemitDate= this.dateToString(submittedData.RemitDate);
    submittedData.OwningAccountKey = this.currentAccount[0].accountId;
    ...

Answer 2

从ngbDatepicker返回的对象为默认格式，因此您需要在onSubmit或模型中手动转换，或者使用自定义日期适配器https://ng-bootstrap.github.io/#/components/datepicker/examples#adapter

如何将ngbDatepicker日期格式转换为形式的字符串onSubmit（）？

2 个答案: