1

我遇到了一个问题，我试图为表单组中的一个控件修补值。它永远不会成功。我将 Angular Material DatePicker 与 moment.js 一起使用

这是HTML：

<form novalid  [formGroup]="desktopSearchForm">
      <div class="row-content" *ngIf="dateRange">
  <mat-form-field class="desktop-input">
    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="mobileFromDate" placeholder="From" formControlName="startDate" (focusout)="dateParse(desktopSearchForm.get('startDate'))" />
    <mat-datepicker-toggle matSuffix [for]="mobileFromDate"></mat-datepicker-toggle>
    <mat-datepicker #mobileFromDate></mat-datepicker>
  </mat-form-field>
</div>
</form>

这是我调用的函数（focusout）

 this.desktopSearchForm = this.fb.group({
  classID: [''],
  startDate: [''], //This is the one I want to patch
  endDate: [''],
  transactionTypeID:['']
})

dateParse(control) {
if (control.value) {
  //control.value is a Moment.js Date object
  let group = <FormGroup>control.parent;
  let TheKey;
  Object.keys(group.controls).forEach(key => {
    let childControl = group.get(key);
    if (childControl === control) { // I found the Control I want to patch
      TheKey = key;                 
    }
  })
  group.patchValue({TheKey:control.value}) //I patch it here.

}

此功能用于将正确的日期格式自动分配回输入字段（图像有许多具有不同名称的日期选择器，例如 startDate、endDate 等）。例如，我在输入框中输入 25111988，当我聚焦时，输入值变为 '25/11/1988'。但问题是 control.value 永远不会修补正确显示“startDate”的键。

但是，如果我将其更改为此并且它可以工作：

group.patchValue({startDate : control.value })

这里还有一个问题是：

如果我将 group.patchValue({startDate : control.value }) 放入：

Object.keys(group.controls).forEach(key => {
let childControl = group.get(key);
if (childControl === control) {
  group.patchValue({startDate : control.value })
}

})

然后它不起作用。这就是为什么我把这个补丁函数放在forEach之外。

需要帮忙。非常感谢。

4

1 回答 1

3

您必须在分配给TheKey的位置绑定动态键，您可以这样做，

唯一的变化是{TheKey:control.value}到{[TheKey]:control.value}

dateParse(control) {
if (control.value) {
  //control.value is a Moment.js Date object
  let group = <FormGroup>control.parent;
  let TheKey;
  Object.keys(group.controls).forEach(key => {
    let childControl = group.get(key);
    if (childControl === control) { // I found the Control I want to patch
      TheKey = key;                 
    }
  })
  group.patchValue({[TheKey]:control.value}) //I patch it here.
}
于 2018-09-26T06:44:33.800 回答