javascript - 表单输入状态颜色不变

在我的一个项目中，我有一个场景，需要根据另一个字段将某个字段标记为正确或错误。我已经创建了一个示例，以便能够在这里提出这样的问题。

主要问题：我无法通过改变另一个输入的值来更改某个输入的状态颜色。

为了更好地理解这个问题，我将尝试用图片来解释：第一步——我在“较小值”输入框中输入了一个较大的数字并失焦，它显示了一个错误，这是预期的：

第二步——我在“更大数字”输入框中输入了一个更大的数字并失焦，所以我预期“更小数值”输入框会变成绿色，但它仍然是红色：

我想要实现的是：每当较小的值更大时，其输入框会被标记为红色；每当较小的值更小时，其输入框会被标记为绿色。

当我更改“较小的值”的数值并使输入框失去焦点时，它是有效的。然而，例如，当我在“较大的数值”输入框中写一个较小的数字并使其失去焦点时，如果“较小的值”输入框之前是绿色的，它不会变红。

这是我的表单和验证函数：

   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 展示了这个问题。

如果您需要更多详细信息，请告诉我！

答案＃1

疯狂！答案是手动将内置类绑定到 ion-items 上：

<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

可用的 stackblitz: https://stackblitz.com/edit/ionic-ctmumh?file=pages/home/home.html

答案＃2

看起来 ion-items 和验证有某种问题。我也遇到过同样的问题。其他人也问过，对于 Ionic 3 没有得到回应。

类似问题：

https://github.com/ionic-team/ionic/issues/12344

https://github.com/ionic-team/ionic/issues/12102