0


因为我得到了一个包含许多不同输入字段的表单，为了避免拥有一个巨大的 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);
    }

}

模板.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 代码： 在此处输入图像描述

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

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

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

谢谢！

4

1 回答 1

3

存根.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'}
];

模板.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: "..."}

于 2017-08-18T14:04:55.887 回答