时间戳

首页 > 解决方案 > Angular Reactive Forms：使用与输入/控件中显示的值不同的值更新表单模型？

angular - Angular Reactive Forms：使用与输入/控件中显示的值不同的值更新表单模型？

问题描述

我有一个包含日期输入的表单。

可以输入格式为“DD MM YYYY”的日期，例如“25 12 2021”。

但是，在表单数据/模型中，我想将该值转换为不同的格式：“2021-12-25”。

因此，用户在屏幕上看到一件事，但表单数据包含重新格式化的版本。几乎就像数据在添加到模型之前被转换一样，但输入仍然显示原始格式。

此外，反过来 - 表单模型通过patchValue或类似的方式进行更新，然后向用户显示的格式为“DD MM YYYY”格式。

例如

<!-- user has entered "25 12 2021" -->
<input value="25 12 2021" />

// it gets stored in the model as "2021-12-25"
form.value = { date: "2021-12-25" }

// form is updated form the class
form.patchValue({date: "1999-12-25"})

<!-- user see this in the put "25 12 1999" -->
<input value="25 12 1999" />

那可能吗？

如果有帮助，我创建了一个空白的 Stackblitz 用作游乐场。

标签： angularangular-reactive-forms

解决方案

没有什么不可能 ：）

创建两个函数（典型名称是 parse 和 format）

  parse(value:string) //receive in the way dd MM yyyy
                      // or in the way dd.MM.yyyy
                      // or in the way dd-MM-yyyy
  {

    value=value?value.replace(/[./-]/g," "):null
    const parts=value?value.split(' '):[];
    if (parts.length==3)
      return parts[2]+"/"+('00'+parts[1]).slice(-2)+"/"+('00'+parts[0]).slice(-2)
    
      return value
  }

  format(value:string) //receive in the way yyyy/MM/dd
  {
    const parts=value?value.split('/'):[];
    if (parts.length==3)
       return ('00'+parts[2]).slice(-2)+"-"+('00'+parts[1]).slice(-2)+"-"+parts[0]

    return value
  }

然后使用 ngModel 更改 formControl，使用 [ngModel] 使用 formControl 的值，以及 (blur) 更改 formControl 的值-您不能使用 (ngModelChange)，因为该函数是在每次更改输入时调度的-

<form [formGroup]="form">
  <input
    #input
    [ngModel]="format(form.get('date').value)"
    (blur)="form.get('date').setValue(parse(input.value))"
    [ngModelOptions]="{ standalone: true }"
  />
</form>

查看堆栈闪电战

注意：您可以在“解析”和“格式”函数中使用所需的逻辑

推荐阅读