Question

我是角度2的新手，并尝试根据使用角度为2的模型动态生成一堆输入字段。某些字段是密码字段。我想让输入字段输入密码，如果是这样的话。我写过这样的话：

<div *ngFor="let field of connector.type.configFields">
    <label>{{field.name}}</label>
    <input [(ngModel)]="field.value" />
</div>

现在的问题是，如果field.name是密码，我想创建字段密码我想在输入中添加这样的东西

<div *ngFor="let field of connector.type.configFields">
    <label>{{field.name}}</label>
    <input [(ngModel)]="field.value" *ngIf="field.name =='Password'" type="password"  />
</div>

现在，如果我这样做，我所有其他不是密码的字段都不会被渲染。仅呈现密码字段。我做错了什么。（我对angular2很新）

Answer 1

这可能会有效，但据我记忆，不支持动态设置type（但可能值得一试）：

<input [(ngModel)]="field.value" [type]="field.name === 'Password' ? 'password' : 'text'"/>

这是安全的选择：

<input [(ngModel)]="field.value" *ngIf="field.name === 'Password'" type="password"  />
<input [(ngModel)]="field.value" *ngIf="field.name !== 'Password'" type="text"  />

如果field.name为'Password'，则添加第一个，否则将第二个输入添加到DOM。

Answer 2

 Other way around you can interpolate the type attribute of input.
 Demo :https://plnkr.co/edit/zfXqCEmaNkulRcWSs1ah?p=preview

 connector: Array<any>;
 constructor() {
 this.name = 'Angular2';
 this.connector = [
  { type: 'text', value: 'firstName' },
  { type: 'text', value: 'lastName' },
  { type: 'numeric', value: 'age' },
  { type: 'password', value: 'password' },
  { type: 'text', value: 'city' }];
 }
 inputType(type) {
 console.log(type);
 let inputType;
 switch (type) {
  case 'text':
    inputType = 'text';
    break;
  case 'numeric':
    inputType = 'number';
    break;
  case 'datetime':
    inputType = 'date';
    break;
  case 'password':
    inputType = 'password';
    break;
  default:
  }
  return inputType;
   }


<div *ngFor="let field of connector">
<label>{{field.value}}</label>
<input [(ngModel)]="field.value"  type={{inputType(field.type)}}  />
</div>

Answer 3

您可以像这样直接添加 <div *ngFor="let form of contactForm.controls"> <input name={{form.label}} type={{form.controlType}}> </div>

动态生成角度为2的输入字段类型并设置字段的类型

3 个答案: