Question

需要：

使用type属性dynamic创建输入。这样的事情：<input id="{{ field.id }}" formControlName="{{ field.code }}" type="{{ field.type }}" />
在FormGroup（反应形式）中使用带有“复选框”动态值的上述输入。

问题：

当我动态设置类型属性时，问题出现了，当我使用 false <初始化FormControl时，它导致在DOM中使用属性值=“false”创建复选框/ em>的。因此，FormGroup永远不会更新。

备注：

当我直接设置 type =“checkbox”时，问题不会发生，因为它不会生成值属性。

此行为显示在Chrome和Firefox的最新版本中。

行为以angular@4.4.6和angular@5.0.0（我未在其他版本的Angular中测试过）中显示

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

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

Answer 1

这可能是同一问题的另一种风格。使用模型驱动表单，如果您将输入类型动态设置为“电子邮件”，电子邮件验证将无法正常工作 - 而不是浏览器或角度验证。相反，它被验证为文本。 NgModel和其他所有工作。假设field.type ===＆＃39; email＆＃39;：

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

我几乎可以肯定我已经用早期的4.x完成了这项工作并且它有效，但可以记忆与老人一起玩耍。也许我使用ngSwitch或ngIf替换整个输入，我想这也是目前唯一的解决方法。

Answer 2

目前有一张开放的门票，Igor Minar和Angular团队正在研究它：

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

奇怪的行为呈现动态类型的输入类型复选框Angular 2 +

2 个答案: