javascript - 如何将 ngbDatepicker 日期格式转换为表单的 onSubmit() 字符串？

Question

在调用后端 API 保存数据之前，我尝试将 ngbDatepicker 日期格式转换为字符串，因为它仅允许字符串格式的日期。我尝试使用 subscribedData.MaturityDate.toString(); 和 subscribedData.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;
        }
      );
  }

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

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

我的 AccountPayableState 模型中的 MaturityDate 和 RemitDate 属性采用字符串格式，因此我认为它们会在以下情况下自动映射为字符串格式:我称之为这个函数。这是我的 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;
    ...