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

由于我得到了一个包含许多不同输入字段的表单，为了避免使用庞大的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'}
];

组件。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

的行为不起作用

最重要的是，如果我尝试提交一些值，这些值不会传递给控制器

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

---

谢谢

stubs.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);
    }

}

最好将

model

重命名为

modelPropName

，以使其更加清晰

这意味着将在

model:any={}

对象的

name

属性中设置

First name

，依此类推

export const MY_DATA=[
{占位符：'First name'，name:'name'，modelPropName:'name'}，
{占位符：'Last name'，name:'lastName'，modelPropName:'lastName'}，
{占位符：'Age'，名称：'Age'，modelPropName:'Age'}
];

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>

提交

提交表单时，应在控制台中执行以下操作：

---

提交的数据：对象{name:“…”，lastName:“…”，age:“…”}

stubs.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);
    }

}

最好将

model

重命名为

modelPropName

，以使其更加清晰

这意味着将在

model:any={}

对象的

name

属性中设置

First name

，依此类推

export const MY_DATA=[
{占位符：'First name'，name:'name'，modelPropName:'name'}，
{占位符：'Last name'，name:'lastName'，modelPropName:'lastName'}，
{占位符：'Age'，名称：'Age'，modelPropName:'Age'}
];

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>

提交

提交表单时，应在控制台中执行以下操作：

---

提交的数据：对象{name:“…”，lastName:“…”，age:“…”}

这很简单，也很完美。谢谢。我想创建一个，但我的对象有两个级别{name:“…”，lastName:“…”，age:“…”，2level:{other:“…”，other2:“…”}可以完成？这很简单，也很完美。谢谢。我想创建一个，但我的对象有两个级别{name:“…”，lastName:“…”，age:“…”，2level:{other:”，other2:“…”}可以完成吗？