绑定日期值更改角度答案

【问题标题】：Binding Date value change Angular绑定日期值更改角度
【发布时间】：2022-10-15 12:12:44
【问题描述】：

我想实现这一点，一旦我点击不同的日期，我的数据输入将根据他们拥有的日期而改变。但是当我尝试触发时，它不会改变任何东西。

asOfDate: any;

ngOnInit(){
  this.fg = this.fb.group({
    arrayForm: this.fb.array([this.CreateList()])
  })
}
CreateList():FormGroup{
  return this.fb.group({
    total: [],
    name: [],
    remarks: [],
    asOfDate: [new Date().toISOString().substring(0, 10)]
  })
}

openDialog(index: number){
  const dialogRef = this.dialog.open(DialogComponent, {});
  dialogRef.afterClosed().subscribe((result) => {
    (this.fg.get('arrayForm') as FormArray).at(index).patchValue(result)
    this.asOfDate = result;
  });
}

dateTrigger(trigger: MatSelectChange){
  this.asOfDate = trigger.value;
}

<td>
  <input matInput type="date" formControlName="asOfDate" class="form-control" (selectionChange)="dateTrigger($event)">
</td>

【问题讨论】：

标签： angular typescript rxjs

【解决方案1】：

尝试使用 (ngModelChange)='dateTrigger($event)'。最良好的问候！

【讨论】：

【解决方案2】：

如果您想使用响应式表单功能，您可以收听 valueChanges 事件

ngOnInit(){
  this.fg = this.fb.group({
   arrayForm:this.fb.array([this.CreateList()])
  })

  merge(...this.fg.get('arrayForm').controls.map(control => control.valueChanges))
    .subscribe(item => this.asOfDate = item.asOfDate);
}

【讨论】：

【解决方案3】：

您应该使用change 事件（模糊）或input 事件（按键按下）来接收来自输入的事件。

<input matInput type="date" formControlName="asOfDate" class="form-control" (input)="dateTrigger($event)">

【讨论】：

【解决方案4】：

据我所知，这是因为this.asOfDate 没有连接到您的表单。

您必须通过 patchValue 更新 formGroup 上的值：

dateTrigger(trigger:MatSelectChange){
   this.asOfDate = this.fg.get('arrayForm').at(0).get('asOfDate').patchValue(trigger.value);
}

【讨论】：