Can’t edit html input fields when using Pipe in Angular 2 with Angular Material

I am using Angular 2 and Angular Material,

I have an object which is an array of Object, that is I get from my pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'iterateObject',
  pure: false
})
export class IterateObjectPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    console.log("i am refreshed");
    if (!value)
      return undefined;
    let keys = [];
    for (let key in value) {
      keys.push({ key: key, value: value[key] });
    }
    return keys;
  }
}

This is my array keys:

[
  {
    "key": "RA_Report #",
    "value": {
      "type": "integer",
      "required": true
    }
  },
  {
    "key": "RA_CAERS Created Date",
    "value": {
      "type": "date",
      "required": true
    }
  },
  {
    "key": "AEC_Event Start Date",
    "value": {
      "type": "date",
      "required": false
    }
  }
]

And my html code looks like this one:

  <md-form-field class="example-full-width" *ngFor="let item of formData?.properties | iterateObject ">
    <input mdInput type="text" placeholder="" value="" >
  </md-form-field>

Every time I click the input fields looks like the input fields get refreshed, so my changes to the text area is lost.

Which is to say, the time I click it, it will refresh, so I can’t make changes there, any solutions?

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/09/cant-edit-html-input-fields-when-using-pipe-in-angular-2-with-angular-material/
via @lzomedia #developer #freelance #web #lzomedia.com