Question

UPDATE -----

我可以使用方法显示一个datepicker，将“date”传递给输入类型。但现在我想使用更好的组件，即Angular Material Datepicker。

现在我的代码如下;我看不到datepicker标签，我按照组件指南使用它...但我只有一个空字段......

<form class="form-inline">
    <div class="form-group" *ngFor="let meta of state.metaById; let i = index" style="margin: 5px">
      <label>{{meta.nome}}</label>
      <mat-form-field *ngIf="indovinaTipo(meta.nome)=='date'">
        <input matInput [matDatepicker]="picker" placeholder="Seleziona una data">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
      <input type="text" class="form-control" #nome (input)="inputInArray(nome.value, i)">
    </div>
    <button>...<button>
</form>

原始帖子---

由于* ngFor，我有一个dinamic生成的表单。它有效，但我需要为for的某些迭代指定不同的输入类型。

有可能吗？

这是代码

<form class="form-inline">
    <div class="form-group" *ngFor="let meta of state.metaById; let i = index" style="margin: 5px">
      <label>{{meta.nome}}</label>
      <input type="text" class="form-control" #nome (input)="inputInArray(nome.value, i)">
    </div>
    <button type="submit" class="btn btn-primary"
            (click)="doClick()">invia
    </button>
  </form>

Answer 1

确保你的功能 indovinaTipo（meta.nome）在你想渲染datepicker时返回正确的日期值，我在plunker中尝试了以下代码，它运行得很好，我＆＃ 39;我不确定你的数据结构，只是为测试设置模拟值

state = [
      {nome: 'a'}
      {nome: 'date'}
      ]



<form class="form-inline">
    <div class="form-group" *ngFor="let meta of state; let i = index" style="margin: 5px">
      <label>{{meta.nome}}</label>

      <mat-form-field *ngIf="meta.nome==='date'">
       <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>

   <input *ngIf="meta.nome!='date'" type="text" class="form-control" #nome (input)="inputInArray(nome.value, i)">
    </div>
</form>

Plunker

Angular 2+，在ngFor创建的表单中指定输入类型属性

1 个答案: