时间戳

首页 > 解决方案 > Angular patchValue 不适用于 JsonConverter

angular - Angular patchValue 不适用于 JsonConverter

问题描述

我有一个带有选择控件的角度形式，它从服务器上的枚举接收它的值。

<select name="" id="" [formControl]="form.get('myType')">
  <option *ngFor="let type of types"  [value]="+type['key']">
    {{ type['value'] }} ({{  type['key']}})
  </option>
</select>

我在这里创建了一个示例，其中响应硬编码在类型变量中：stackblitz

我现在正在尝试使用 form patchValue 方法填充表单（请参阅 setValues 按钮和方法）。

  setValues() {
    this.form.patchValue({
      myType: 0
    });
  }

在现实生活中，此响应来自服务器。

来自服务器的模型如下：

public class TestModel
{
    public MyType Type { get; set; }
}

到目前为止，这有效。

如果我更改服务器上的模型以包含 Json StringEnumConverter 属性：

public class TestModel
{
    [JsonConverter(typeof(StringEnumConverter))]
    public MyType Type { get; set; }
}

patchValue 方法现在是这样的（参见 setValues2 按钮和方法）：

  setValues2() {
    this.form.patchValue({
      myType: 'Type1'
    });
  }

但是我的值不再加载到选择控件中。

我怎样才能解决这个问题？

我开始创建一个指令，但我不知道如何拦截绑定以将值更改为等效的枚举键。

请帮忙

标签： angularangular-reactive-formsangular-directivejsonconvertjsonconverter

解决方案

您已将选项值设置为类型数组中的键属性

<option *ngFor="let type of types"  [value]="+type['key']">

但是在setValues2方法中，您将表单值设置为type['value']，这就是该方法不起作用的原因。因为它期望值1或2，但得到Type2。

我认为您可以尝试将选项的值设置为类型数组中的对象

<option *ngFor="let type of types"  [value]="type">

那么你的方法应该将这些对象设置为表单值

setValues() {
    this.form.patchValue({
      myType: this.types[0]
    });
  }

  setValues2() {
    this.form.patchValue({
      myType: this.types[1]
    });
  }

推荐阅读