Show TEdit in FireMonkey has an error in it with red border

2
votes

I'm working on a mobile application where the user needs to login.

The server is returning me if the e-mail is invalid, or subdomain or password and I want to focus the TEdit that has the error. Focus is easy but I would also like to mark the edit as invalid like many web applications do.

enter image description here

What is the best way to do this is a consistent way so it will look correct on both Android as iOS. Is something like this built-in? I'm using Delphi 10.1

2
delphifiremonkey
You can tweak the style to add a red border, but I'm not sure about platform support. – Jerry Dodge
This seems like a very common use-case so I'm hoping that I missed a certain best practice way of doing this. – rept

2 Answers

2
votes

Loki's suggestion is a possible solution.

A solution which takes advantage of FMX features would be to use a TGlowEffect for the red frame around the TEdit and then use a TPopup to create the hint.

1
votes

the style it's just a nightmare in 99% of the case, so i strongly suggest to not touch it. i will instead put a Trectangle as the background of the Tedit, put the Tedit as Transparent (you already have this style ready in the stylelookup in the object inspector), and then simply set the stroke.color of the trectangle.

i m working also right now on a 100% native Tedit on ios/android/windows i guess i will finish this code in around 1 week.