CODEWITHSUNDEEP
angularjs
AmazingDayToday
AmazingDayToday

Reputation: 4272

An invalid form control with name='' is not focusable in a form

I tried many answers here at Stackoverflow, but none of them working:

<form ng-submit="runIt(cars)">
    <input type="radio" ng-model="cars.erp" value="Toyota" ng-required="!cars.erp">Toyota
    <br>
    <input type="radio" ng-model="cars.erp" value="Nissan" ng-required="!cars.erp">Nissan
    <br>
    <input type="radio" ng-model="cars.erp" value="Honda" ng-required="!cars.erp">Honda
    <br>
    <input type="radio" ng-model="cars.erp" value="Other" ng-required="!cars.erp">Other
    <input type="text" ng-model="cars.other" ng-show="cars.erp=='Other'" ng-required="!cars.other">
    <br>
    <input type="submit">
</form>

It all starts working only after typing a value in Other. Apparently, this is due to hidden input, but this is how it should work:

Here's the fiddle: http://jsfiddle.net/ADukg/17426/

To reproduce:

Upvotes: 0

Views: 989

Answers (2)

MorbidGnome
MorbidGnome

Reputation: 115

The reason for the specific error you're getting of "invalid form control with name='' is not focusable" is because the browser wants to focus on the form element that is required(the text input), but the element is not visible.

<input type="text" ng-model="cars.other" ng-show="cars.erp=='Other'" ng-required="!cars.other"> You're saying that the text field is only required if cars.other evaluates to false. In other words, you're saying that the text field is required whenever it isn't filled out. What you actually want is for the text field to be required if cars.erp is set to other.

<input type="text" ng-model="cars.other" ng-show="cars.erp=='Other'" ng-required="cars.erp=='Other'">

Upvotes: 1

0_0
0_0

Reputation: 537

Your text field's ng-model is cars.other and then you are checking for ng-required="!cars.other" which isn't right. You are requiring the text field with it self. Instead it should be dependent on the value of the radio button. Something like ng-required="cars.erp=='Other'".

I have updated the JSFiddle here -> http://jsfiddle.net/d0o29hb2/3/. Hope this helps.

Upvotes: 1

Related Questions