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将在name对象的model: any = {}属性中设置，依此类推。

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动态创建输入类型

1 个答案: