javascript - Färg på formulärinmatning ändras inte

I ett av mina projekt har jag ett scenario där jag behöver markera ett fält som korrekt eller felaktigt beroende på ett annat fält. Jag har skapat ett exempel för att kunna ställa en fråga som denna här.

Huvudproblemet: Jag kan inte ändra statusfärgen på ett inputfält genom att ändra värdet på ETT ANNAT inputfält.

För en bättre förståelse av problemet kommer jag att försöka förklara med bilder: Steg ett - jag har skrivit ett större nummer i fältet Mindre värde och suddat ut det och det visar ett fel vilket är förväntat:

Steg två - Jag har skrivit ett större nummer i fältet för Större Nummer och klickat bort fokus, så jag förväntar mig att fältet för Mindre Värde blir grönt, men det förblir rött:

Vad jag skulle vilja uppnå är: När det mindre värdet är större, färgas dess inmatning röd, och när det mindre värdet är mindre, färgas dess inmatning grön.

Och det fungerar när jag ändrar värdet på Mindre Värde och avmarkerar inmatningen. Men till exempel, när jag skriver ett mindre nummer i inmatningen för Större Nummer och avmarkerar den, blir inte inmatningen Mindre Värde röd om den tidigare var grön.

Detta är mitt formulär och min valideringsfunktion:

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

Jag har skrivit denna funktion för att försöka utlösa validering manuellt, och den utlöser faktiskt valideringen, det är bara det att inmatningen för Större Nummer inte kan ändra valideringsstatusen för den mindre inmatningen:

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

Här är en STACKBLITZ som visar problemet.

Om du behöver fler detaljer, vänligen meddela mig!

Svar #1

Galet! Svaret är att binda de inbyggda klasserna manuellt till ion-items:

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

Kredit för detta svar går till brianlittmann i detta GitHub-ärende:

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

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

Svar #2

Det verkar finnas någon form av problem med ion-items och valideringar. Jag hade samma problem. Andra har också frågat och när det gäller Ionic 3 fanns inget svar.

Liknande problem:

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

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