表单输入状态颜色不变

Question

In one of my projects I have a scenario where I need to mark a field correct or incorrect depending on another field. I have created an example to be able to ask a question like this here.

The main problem: I'm unable to change the status color of an input by changing the value of ANOTHER input.

For better understanding of the issue I will try to explain by images: Step one - I have written a bigger number in the Smaller Value input and blurred it and it shows an error which is expected:

Step two - I have written a bigger number in the Bigger Number input and blurred it, so I expect the SMaller Value input to be green, but it stays red:

What I'd like to achieve is: Whenever the smaller value is bigger, it's input is colored red, and whenever the smaller value is smaller, its input is colored green.

And it works when I change the value of Smaller Value and blur the input. However, for example, when I write a smaller number in the Bigger Number input and blur it, the Smaller Value input does not get colored red if it was green before.

This is my form and validator function:

   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;
    }

I have written this function to attempt to trigger validation manually, and it does trigger the validation, it's just that the Bigger Number input is unable to change the validation status of the smaller input:

updateFields(){
  for (const field in this.thisForm.controls) {
  this.thisForm.controls[field].updateValueAndValidity();
}
}

Here is a STACKBLITZ that showcases the issue.

If you need any more details, please let me know!

Answer 1

Crazy! The answer is to bind the built-in classes manually to the ion-items:

<ion-item [class.ng-invalid]="!thisForm.controls.smallerValue.valid" [class.ng-valid]="thisForm.controls.smallerValue.valid">

Credit for this answer goes to brianlittmann in this github issue:

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

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

Answer 2

There seems to be some kind of issue with ion-items and validations. I had the same problem. Other's have asked too and as for Ionic 3 there was no response.

Similar issues:

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

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