奇数行为呈现动态类型输入类型复选框角2+

Question

需要：

• 使用type属性动态创建一个输入。就像这样：<input id="{{ field.id }}" formControlName="{{ field.code }}" type="{{ field.type }}" />
• 在FormGroup (reactive )中使用上面带有“复选框”动态值的输入。

问题：

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

备注：

• 当我直接设置type="checkbox"时，问题不会发生，因为它不会生成值属性。
• 这种行为出现在Chrome和Firefox的最新版本中。
• 这种行为出现在角@4.4.6和角@5.0.0(我还没有在其他版本的角测试)

行为模拟：您可以通过以下链接检查行为：https://stackblitz.com/edit/angular-gitter-ke3jjn

我真的很想了解这种行为是否正常，以及为什么。谢谢!

Answer 1

目前有一张公开的门票，伊戈尔·米纳尔和角形小组正在调查：

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

这可能是同一问题的另一种风格。使用模型驱动的表单，如果动态地将输入类型设置为“email”，则电子邮件验证将无法工作--而不是浏览器或角度验证。相反，它将被验证为文本。不过，NgModel和其他一切都能工作。假设email.email==‘email’：

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

我几乎可以肯定，我已经用了一些早期的4.x做了这件事，而且它起了作用，但它可以成为与老人玩恶作剧的记忆。也许我使用ngSwitch或ngIf来交换整个输入，我想这也是目前唯一的解决办法。