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

Question

更新-----

我可以用一种方法显示日期选择器，将 "date" 传递给输入类型。但是现在我想使用一个更好的组件，即 Angular Material 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>

原版POST ---

感谢 *ngFor，我有一个动态生成的表单。它有效，但我需要为 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) 在你想要呈现日期选择器时返回正确的日期值，我已经在 plunker 中尝试了以下代码并且它工作得很好，我不确定你的数据结构，只是为 test

放置模拟值

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 创建的表单中指定输入类型属性

Angular 2+, specify input type attribute inside a ngFor created form

forms

ngfor

angular