Good Morning
I would like to ask for help on how to solve a problem like the video below:
Every time I validate, the error message label keeps appearing and disappearing, creating a flickering effect. I am using Vaadin Hilla version 24.7.3. Is there a solution to this?
This is the code I created:
export default function RegisterView() {
const [errMessage, setErrMessage] = useState("")
const formModel = useForm(RegisterFormModel)
const emailField = useFormPart(formModel.model.email)
useEffect(() => {
formModel.addValidator({
message: "Password tidak match",
validate: (val) => {
if (val.rawPassword != val.reTypePassword) {
return [{property: formModel.model.reTypePassword}]
}
return []
}
})
}, [])
return (
<div className="w-full h-full flex justify-center">
<div
className="flex gap-xl mt-xl"
style={{
width: "60%"
}}
>
<div className="h-full flex flex-col">
<h1>Registrasi Akun</h1>
<p>Lakukan registrasi sebelum melanjutkan kedalam sistem</p>
{errMessage != undefined
? <p>{errMessage}</p>
: null
}
<FormLayout
responsiveSteps={[
{minWidth: '0', columns: 1}
]}
>
<TextField
label="Nama"
{...formModel.field(formModel.model.fullName)}
/>
<TextField
label="email"
{...formModel.field(formModel.model.email)}
/>
<PasswordField
label="Password"
{...formModel.field(formModel.model.rawPassword)}
/>
<PasswordField
label="Konfirmasi Password"
{...formModel.field(formModel.model.reTypePassword)}
/>
<Button onClick={formModel.submit}>Register</Button>
</FormLayout>
</div>
<ProductInformation/>
</div>
</div>
)
}
public record RegisterForm(
@NotBlank String fullName,
@NotBlank @Email(message = "Format email harus benar") String email,
@NotBlank String rawPassword,
@NotBlank String reTypePassword
) {
}
@BrowserCallable
@AnonymousAllowed
public class RegisterService {
public void register(@Valid RegisterForm form) {
System.out.println("Berhasil Register");
}
}
Thank you