Angular patchValue not working with JsonConverter

Question

I have a angular form with a select control which receives it's values from an enum on the server.

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

I've created an example here with the response hard coded in the types variable : stackblitz

I'm now trying to populate the form using the form patchValue method (see setValues button and method).

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

In real life this response comes form the server.

The model from the server is as follows:

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

So far this works.

If I change the model on the server to include the Json StringEnumConverter attribute:

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

The patchValue method is now like this (see setValues2 button and method):

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

However my value is no longer loaded into the select control.

How can I get around this?

I started creating a directive but I don't know how to intercept the bindings to change the value to the enums key equivalent.

Please help

score 0 · Answer 1 · answered Oct 14 '19 at 13:10

0

You have set option value as key property from types array

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

But in setValues2 method you set form value as type['value'], that's why this method doesn't work. As it expects values 1 or 2, but gets Type2.

I think you can try to set option's value as object from types array

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

then your methods should set these objects as form value

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

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

answered Oct 14 '19 at 13:10

vitaliy kotov

570
3
5

I was hoping to create a directive as some of the endpoint models have the Json string converter and some dont – Sun Oct 14 '19 at 13:24
Probably I don't get the case for which you need a directive, but as long as you assign option's value as whole object, it doesn't matter what properties this object has – vitaliy kotov Oct 14 '19 at 14:07

score 0 · Answer 2 · answered Oct 14 '19 at 13:29

0

As your selected item is based on key, however, there is no key with value Type1. So your [value] is null. You can find its key by value and set [value]:

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

getKey(typeName:string) {
    let key = this.types.find(f => f.value === typeName).key;
    return key ? key : 0;
}

answered Oct 14 '19 at 13:29

StepUp

36,391
15
88
148

Yes, this is sort of what I want but I want a directive to intercept the setting of the value. The reason I'd like a directive is because I have multiple forms that will have similar code, the patchValue call is within a base class so the type will be different for each form. – Sun Oct 15 '19 at 08:06

Angular patchValue not working with JsonConverter

2 Answers2