Radio Group Validation

[jacobharasimo]

If you create a form with a group of radio choices validation of the radios wont happen on keyboard input unless you 'blur' from the last radio.

example:

http://jsbin.com/yosodolepe/1/edit?html,css,js,output

• click on the input.
• press tab once -> notice the input becomes invalid and focus is now on the first radio option
• press tab a second time and focus now is on the 'remove' button
• note radios are not marked invalid but should be
• press shift+tab and note focus is now on the last radio option
• press tab, focus is now on the remove button and this time radios are marked invalid

the radio's should of been marked invalid in both cases yet it appears validation is only happening when you 'blur' from the last radio option.

This only happens in chrome i believe as in FF it works as expected...

[kamilkisiela]

@jacobharasimo It seems like it is a formlyBootstrap issue.

$touched property of radio is incorrect (false) and radio stays untouched so options.validation.errorExistsAndShouldBeVisible is false (see docs).

The rule of that longCamelCasedProperty by default is: field invalid && (field touched || validation.show).

As you can see it is true && (false || false) so it equals false.

It happens because of duplication of names. According to https://github.com/angular/angular.js/issues/3345#issuecomment-21816304 this is a bad idea.

---

So you should post an issue on formlyBootstrap.