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

Question

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

这是我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

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

Answer 2

你可以用一个函数来转换你的日期；

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

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

How to convert ngbDatepicker date format to string onSubmit() of form?

javascript

typescript

angular-components

angular