Angular 4 - Eingabetyp zu schaffen dynamisch mit ngFor

Question

da ich ein Formular mit vielen verschiedenen Eingabefeldern bekam, eine gigantische HTML-Vorlage zu vermeiden, dass ich die Felder Daten in Objekten setzen will, und erstellen Sie die Vorlage dynamisch ngFor mit .
Dies ist mein Code bis jetzt.

stub.ts - das ist, wo ich meine Daten speichern

export const MY_DATA = [ 
    { placeholder: 'First name', name: 'name', model: 'model.name'}, 
    { placeholder: 'Last name', name: 'lastName', model: 'model.lastName'}, 
    { placeholder: 'Age', name: 'age', model: 'model.age'} 
]; 

component.ts

import { Component, OnInit } from '@angular/core'; 
import {MY_DATA} from './stub'; 

@Component({ 
    selector: 'app-valutazione-insert', 
    templateUrl: './valutazione-insert.component.html', 
    styleUrls: ['./valutazione-insert.component.css'] 
}) 
export class ValutazioneInsertComponent implements OnInit { 

    model: any = {}; 
    data = MY_DATA; 

    constructor() { } 

    ngOnInit() {} 

    submit() { 
     console.log('Data submitted: ', this.model); 
    } 

} 

template.html

<div id="datiRichiesta" [hidden]="datiRichiestaClicked" > 
     <div class="form-group" *ngFor="let d of data"> 
      <input type="text" class="form-control" placeholder="{{d.placeholder}}" [(ngModel)]=d.model name="{{d.name}}" 
       onfocus="this.placeholder = ''" (blur)="this.placeholder = d.placeholder"/> 
     </div> 
     </div> 

Dies sind die Eingabefelder Ich habe:

Dies wird der gerenderte HTML-Code:

Nun, ich habe ein paar Dinge, die nicht funktionieren:

1. auch wenn auf dem gerenderten html alle Attribute korrekt gesetzt sind, nimmt der Platzhalterwert den Modellwert
2. das Verhalten von t er Platzhalter onfocus und onblur funktioniert nicht
3. am wichtigsten ist, wenn ich versuche, einige Werte einreichen diese nicht

nun jedes Problem an die Steuerung weitergegeben verschwinden, wenn ich einen Eingabetyp mit allen Eigenschaften statisch eingestellt verwenden. Gibt es eine Möglichkeit zu erreichen, was ich will?

Danke!

Answer 1

stubs.ts

Es ist besser, umbenannt model-modelPropName, um es deutlich zu machen.

Dies bedeutet First name wird in der name Eigenschaft des model: any = {} Objekts gesetzt, und so weiter.

export const MY_DATA = [ 
    { placeholder: 'First name', name: 'name', modelPropName: 'name'}, 
    { placeholder: 'Last name', name: 'lastName', modelPropName: 'lastName'}, 
    { placeholder: 'Age', name: 'age', modelPropName: 'age'} 
]; 

template.html

<form id="datiRichiesta" [hidden]="datiRichiestaClicked" (submit)="submit()"> 
    <div class="form-group" *ngFor="let d of data"> 
     <input type="text" 
      class="form-control" 
      placeholder="{{d.placeholder}}" 
      [(ngModel)]="model[d.modelPropName]" 
      name="{{d.name}}" 
      (focus)="$event.target.placeholder = ''" 
      (blur)="$event.target.placeholder = d.placeholder"/> 
    </div> 
    <button>Submit</button> 
</form> 

Wenn Sie das Formular abschicken Sie in der Konsole sollte:

Data submitted: Object {name: "...", lastName: "...", age: "..."}