2017-05-04

Get list of object keys in Angular

import { PipeTransform, Pipe } from "@angular/core";
@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

Then to get a list of errors for a form element you can do this

<ul *ngIf="form.get('userName').invalid" class="help-block with-errors">
   <li *ngFor="let error of form.get('userName').errors | keys">{{ error.key }}</li>
</ul>