CODEWITHSUNDEEP
javascripthtmlangularvalidation
Raef Kandil
Raef Kandil

Reputation: 307

When there is an input box with validation in Angular, it requires two clicks to transfer control to radio button

I have an input box and a radio box. When I click on the input box and then click on the radio box, I suppose the control should transfer to the radio box immediately. Instead, the first time, it shows the error message and the second time, it transfers the control to the radio box.

You can find a plunker of the issue here: No transfer of control to the radio box except after the second click

Upvotes: 1

Views: 58

Answers (1)

user4676340
user4676340

Reputation:

Yes, that's because you're showing the error as a block, this shifting the radio button.

To image that, imagine that the error pops when the mouse button goes down, while the radio box is checked when the mouse button goes up.

It might be a split second, but it's enough for your user to be fooled.

I would recommend either displaying your error in another way / Findign another layout for your form, or just validate the form on submit.

To validate the form on submit, Use the second parameter of the FormBuilder.group call : 

this.myForm = fb.group({...}, { updateOn: 'submit' });

Here is an example of a working form, because the error is blurred out instead of removed (hidden vs style.opacity) : https://next.plnkr.co/edit/QEEviTpocGJ7QHus?open=lib%2Fapp.ts&deferRun=1

Upvotes: 1

Related Questions