setValue on select FormControl with ngx-translate - Angular 2

Question

I have a select FormControl inside a reactive form that I am using pipe translate from the ngx-translate library on. On initialization of the FormControl in my creation of the FormGroup the value is reflecting just fine in the DOM, and you can actually see the translation. However, when I try to reset, setValue, or patchValue on the FormControl the pipe translate does not seem to like it at all. I can console.log the value of the FormControl after resetting it and actually see the value change. It just does not reflect this change in the DOM. I have also tried adding a (ngModelChange) to the FormControl to watch the value change after resetting it and this works as well, but does not reflect it in the DOM. My desired result would be to use reset since I can set the value of the control and reset the state of the control all in one pass. It is the weirdest behavior I have seen, and I cannot figure this out. If I remove the pipe translate the reset of the value works perfectly fine and reflects the value in the DOM. Any help would be appreciated! Here is the following code:

this.shopInfoForm = this._formBuilder.group({
  name: [this._settings.name],
  brand: [this._settings.brands[0]],
  language: [this._settings.language]
});

get language() { return this.shopInfoForm.get('language'); }

this.language.reset(this._settings.language);

<div class="input-group">
  <span class="input-group-addon">Language</span>
  <select formControlName="language" class="form-control">
    <option *ngFor="let language of languages">{{language.langLabelId.toString() | translate}}</option>
  </select>
</div>

mlangwell mlangwell · Accepted Answer · 2017-11-17T20:42:28

Just in case anyone runs into this same problem. It all had to do with the value attribute on the option tag. I updated my code in the DOM to look like this:

<option *ngFor="let language of languages" value="{{language.langLabelId}}">{{language.langLabelId.toString() | translate}}</option>

and it works just fine now.

setValue on select FormControl with ngx-translate - Angular 2

1 Answers