表单输入状态颜色不变

时间:2018-10-17 15:49:58

标签: javascript angular typescript ionic-framework ionic3

在我的一个项目中,我有一个场景,我需要根据另一个字段将一个字段标记为正确或不正确。我创建了一个示例,可以在这里提出这样的问题。

主要问题:我无法通过更改ANOTHER输入的值来更改输入的状态颜色。

为了更好地理解该问题,我将尝试通过图像进行解释: 第一步-我在“较小值”输入中写了一个较大的数字并将其模糊,它显示了预期的错误:

enter image description here

第二步-我在“较大数字”输入中写了一个较大的数字并将其模糊,因此我希望“较小值”输入为绿色,但仍为红色:

enter image description here

我想要实现的是: 每当较小的值越大,它的输入就被涂成红色;而越小的值,它的输入就被涂成绿色。

当我更改“较小值”的值并使输入模糊时,它会起作用。但是,例如,当我在“较大数字”输入中写入较小的数字并将其模糊时,“较小值”输入如果之前为绿色,则不会变为红色。

这是我的表单和验证器功能:

   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

如果您需要更多详细信息,请告诉我!

2 个答案:

答案 0 :(得分:2)

疯狂!答案是将内置类手动绑定到离子项目:

    def isPrime(n):
        if n < 2: return "Neither prime, nor composite"
        for i in range(2, int(n**0.5) + 1):
            if n % i == 0:
                return False
        return True



 def sumPrime():
        sumT = 0
        for i in range(2,2000000):
            if(isPrime(i)):
                sumT = sumT + i
        return sumT

此答案的信用归于github问题的brianlittmann:

https://github.com/ionic-team/ionic/issues/6040#issuecomment-315037781

正在工作的堆叠闪电战: https://stackblitz.com/edit/ionic-ctmumh?file=pages/home/home.html

答案 1 :(得分:1)

离子项目和验证似乎存在某种问题。我有同样的问题。别人也问过,至于Ionic 3,也没有回应。

类似的问题:

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

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