在我的一个项目中,我有一个场景,我需要根据另一个字段将一个字段标记为正确或不正确。我创建了一个示例,以便能够在这里提出这样的问题。
主要问题:我无法通过更改另一个输入的值来更改输入的状态颜色。
为了更好地理解这个问题,我将尝试通过图像来解释: 第一步 - 我在较小的值输入中写入了较大的数字并将其模糊化,它显示了预期的错误:
第二步 - 我在“较大数字”输入中写了一个较大的数字并将其模糊化,因此我希望“较小值”输入为绿色,但它仍保持红色:
我想要实现的是: 每当较小的值较大时,其输入就会变为红色,每当较小的值较小时,其输入就会变为绿色。
当我更改较小值的值并模糊输入时,它会起作用。但是,例如,当我在“较大数字”输入中写入较小的数字并将其模糊时,“较小值”输入如果之前为绿色,则不会变为红色。
这是我的表单和验证器函数:
this.thisForm = new FormGroup({
smallerValue: new FormControl('', [
this.validateSuccessShortName.bind(this)
]),
biggerNumber:new FormControl('', [
Validators.required
])
});
}
validateSuccessShortName(control: AbstractControl) {
if (parseInt(control.value,10) > parseInt(this.biggerNumber, 10)) {
return {value: control.value};
}
return null;
}
我编写这个函数是为了尝试手动触发验证,它确实触发了验证,只是较大的数字输入无法更改较小的输入的验证状态:
updateFields(){
for (const field in this.thisForm.controls) {
this.thisForm.controls[field].updateValueAndValidity();
}
}
这是一个STACKBLITZ这展示了这个问题。
如果您需要更多详细信息,请告诉我!
最佳答案
疯狂!答案是将内置类手动绑定(bind)到 ionic 项:
<ion-item [class.ng-invalid]="!thisForm.controls.smallerValue.valid" [class.ng-valid]="thisForm.controls.smallerValue.valid">
此答案归功于 github 问题中的 brianlittmann:
https://github.com/ionic-team/ionic/issues/6040#issuecomment-315037781
工作堆栈 Blitz : https://stackblitz.com/edit/ionic-ctmumh?file=pages/home/home.html
关于javascript - 表单输入状态颜色不变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52858903/