Angular 4 - 使用 ngFor 动态创建输入类型

Question

因为我得到了一个包含很多不同输入字段的表单，为了避免使用巨大的 html 模板，我想将字段数据放在对象中并使用 ngFor 动态创建模板。
到目前为止，这是我的代码。

stub.ts - 这是我存储数据的地方

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>

这些是我得到的输入字段：

这是呈现的html代码：

现在，我得到了一些不起作用的东西：

即使在呈现的 html 上所有属性都已正确设置，占位符值也会采用模型值
占位符 onfocus 和 onblur 的行为不起作用
最重要的是，如果我尝试提交一些值，这些值不会传递给控制器

现在，如果我使用所有属性都静态设置的输入类型，所有问题都会消失。有什么办法可以实现我想要的吗？

谢谢！

Answer 1

stubs.ts

最好把model重命名为modelPropName更清楚

这意味着First name将被设置在model: any = {}对象的name属性中，依此类推。

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>

当您在控制台中提交表单时：

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

Angular 4 - 使用 ngFor 动态创建输入类型

Angular 4 - creating input type dynamically with ngFor

html

angular

ngfor

angular-template

angular-forms