title: Angular 4 - creating input type dynamically with ngFor
body: <p><br>
  since I got a form with a lot of different input fields, to avoid having a gigantic html template I want to put the fields data inside objects and create the template dynamically using <code>ngFor</code>. <br>
  This is my code until now.</p>
  
  <p><strong>stub.ts</strong> - this is where I store my data</p>
  
  <pre><code>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'}
  ];
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>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);
      }
  
  }
  </code></pre>
  
  <p><strong>template.html</strong></p>
  
  <pre><code>&lt;div id="datiRichiesta" [hidden]="datiRichiestaClicked" &gt;
          &lt;div class="form-group" *ngFor="let d of data"&gt;
            &lt;input type="text" class="form-control" placeholder="{{d.placeholder}}" [(ngModel)]=d.model name="{{d.name}}"
                  onfocus="this.placeholder = ''" (blur)="this.placeholder = d.placeholder"/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><strong>These are the input fields I got:</strong>
  <a href="https://i.stack.imgur.com/VOW4g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VOW4g.png" alt="enter image description here"></a></p>
  
  <p><strong>This is the rendered html code:</strong>
  <a href="https://i.stack.imgur.com/YKIdD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YKIdD.png" alt="enter image description here"></a></p>
  
  <p>Now, I got some things that don't work:</p>
  
  <ol>
  <li>even if on the rendered html all attributes are correctly set, the placeholder value takes the model value</li>
  <li>the behaviour of the placeholder <code>onfocus</code> and <code>onblur</code> is not working</li>
  <li>most important, if I try to submit some values these are not passed to the controller</li>
  </ol>
  
  <p>Now every problem disappear if I use an input type with all properties set statically. Is there any way to achieve what I want?<br></p>
  
  <p>Thanks!</p>