奇数行为渲染动态类型的输入类型复选框Angular 2

Question

需要：

• 使用类型属性动态创建输入。这样的东西： <input id="{{ field.id }}" formControlName="{{ field.code }}" type="{{ field.type }}" />
• 使用上面的输入，其中包含"复选框"的动态值(反应式形式(。

问题：

当我动态地设置 type 属性时，问题出现了，当我用属性值=" false"以 false false <<em> false <<em> false 。因此，FormGroup永远不会更新。

注意：

• 当我直接设置 type ="复选框" 时，问题不会发生，因为它不会生成值属性。
• 该行为以最新版本的Chrome和Firefox表示。
• 行为以angular@4.4.6和angular@5.0.0(我没有在其他版本的Angular中进行测试(

行为模拟：您可以在此链接上自己检查行为：https：//stackblitz.com/edit/angular-gitter-ke3jjn

我真的很想了解这种行为是否正常以及原因。谢谢！

Answer 1

当前有一个公开票，而igor Minar和Angular Team正在研究它：

https://github.com/angular/angular/issues/7329

与此同时，您可以进行此解决方法：

onChange(event) {   
    this.form.get(event.target.attributes.formcontrolname.value)
    .setValue(event.target.checked);
}  

，在您的html中，您可以添加此：

<input id="check" type="{{'checkbox'}}" formControlName="checkOdd (change)="onChange($event)"/>

您还可以在Onchange内部添加条件以检查输入的类型，并做一些与此不同的事情，例如：

onChange(event) {  
    if(event.target.type === 'checkbox') {
      console.log('Checkbox'); 
    }
    if(event.target.type === 'text') {
      console.log('text'); 
    }
    this.form.get(event.target.attributes.formcontrolname.value)
    .setValue(event.target.checked);
}  

https://stackblitz.com/edit/angular-gitter-kzunhk?file=App/app.component.ts

Answer 2

这可能是同一问题的另一种口味。使用模型驱动的表单，如果您动态设置了"电子邮件"的输入类型，则电子邮件验证将无法正常工作 - 而不是浏览器或角验证。相反，它被验证为文本。NGMODEL和其他所有工作都可以。假设field.type ==='电子邮件'：

<input *ngFor="field in fields" [type]="field.type" [(ngModel)]="field.model" [required]="field.required"/>

我几乎确定我已经使用了一些早期的4.x进行了操作，但是可以是与老人一起玩的记忆。也许我使用ngswitch或ngif交换了整个输入，我想这也是目前唯一的工作。