Angular 将值分配回组的 PatchValue 问题

Question

我遇到了一个问题，我试图为表单组中的一个控件修补值。它永远不会成功。我使用 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 })
}

})

那么这不是 work.that 为什么我把这个补丁函数放在 forEach 之外的原因。

需要帮助。非常感谢。

Answer 1

你必须在分配给 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.
}

Angular 将值分配回组的 PatchValue 问题

Angular PatchValue problem with assigning value back to group

angular

formgroups

angular5