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

Question

需要：

创建类型属性为动态的输入。像这样：<input id="{{ field.id }}" formControlName="{{ field.code }}" type="{{ field.type }}" />
在 FormGroup（响应式表单）中使用带有 "checkbox" 动态值的上述输入。

问题：

当我动态设置 type 属性时出现问题，它导致在 DOM 中创建属性值="false" 的复选框当我用 false 初始化 FormControl 时。因此 FormGroup 永远不会更新。

备注：

直接设置type="checkbox"不会出现这个问题，因为它不会生成value属性。
该行为出现在最新版本的 Chrome 和 Firefox 中。
该行为在angular@4.4.6 和angular@5.0.0 中出现（我没有在其他版本的Angular 中测试过）

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

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

Answer 1

这可能是同一问题的另一种形式。对于模型驱动的表单，如果您将输入类型动态设置为 'email'，电子邮件验证将不起作用 - 浏览器或 Angular 验证不起作用。相反，它被验证为文本。 NgModel 和其他所有东西都可以工作。假设 field.type==='email':

<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+

Odd behavior rendering dynamically type of input type checkbox Angular 2+

checkbox

behavior

dynamic

angular