奇怪的行为呈现动态类型的输入类型复选框Angular 2-Java 学习之路

Need:

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

Problem:

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

Notes:

当我直接设置 type="checkbox" 时，问题不会发生，因为它不会生成value属性 .
此行为显示在Chrome和Firefox的最新版本中 .
行为以angular@4.4.6和angular@5.0.0表示（我没有在其他版本的Angular中测试过）

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

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

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

回复于 2024-04-29T01:50:25+08:00

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来交换整个输入，我想这也是目前唯一的解决方法 .
回复于 2024-04-29T01:50:25+08:00

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

2 回答

相关问题