Angular Form Controls im Template mittels Keys Pipe iterieren

Downloads:

Ausgangslage

Es wird von folgender Struktur ausgegangen:

myForm: FormGroup;

initForm() {
    this.myForm = this.fb.group({
        firstName: this.fb.control(''),
        lastName: this.fb.control(''),
        age: this.fb.control(''),
    });
}

Problem

Nun möchte man die oben erstellten FormControls mittels ngFor im Template iterieren.

<div *ngFor="let control of myForm.controls">
    {{control}}
</div>

Hierbei wird folgender Fehler ausgegeben, da man versucht ein Object zu iterieren und nicht die eigentlichen Keys:
Cannot find a differ supporting object ‚[object Object]‘ of type ‚object‘.

Lösung

Abhilfe schafft hier eine Angular Custom Keys Pipe, welches das Objekt als Parameter erhält und die Object.keys zurückgibt:

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

@Pipe({ name: 'keys', pure: false })
export class KeysPipe implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value)
    }
}

Keys Pipe integrieren

Um die custom Angular Keys Pipe im Template verwenden zu können, muss diese in einem Angular Module importiert und deklariert werden:

//hier app.module.ts
//... restliche imports
import { KeysPipe } from './keys.pipe';

@NgModule({
    imports: [
        BrowserAnimationsModule, BrowserModule, ReactiveFormsModule, FormsModule
    ],
    declarations: [AppComponent, KeysPipe],
    bootstrap: [AppComponent]
})
export class AppModule { } 

Keys Pipe im Template anwenden

Die custom Angular Keys Pipe lässt sich nun einfach mittels Pipe-Symbol an das zu iterierende Objekt anfügen:

<div *ngFor="let controlKey of myForm.controls | keys">
    {{controlKey}}
</div>

Die Ausgabe sollte nun wie folgt aussehen:

<div>firstName</div>
<div>lastName</div>
<div>age</div>

Was lässt sich hiermit nun anstellen?

Nun könnte man eine dynamische Component schreiben, welche als Input ein Angular FormControl erwartet.
Das erwartete Control kann man nun über myForm.get() und dem Iterations Element controlKey erhalten.

<div *ngFor="let controlKey of myForm.controls | keys">
    <my-dynamic-component [control]="myForm.get(controlKey)"></my-dynamic-component>
</div>