Angular form validation with name in square brackets

Question

For some reason I am unable to get the form element when it has a [] in the name. for example when I try the following

    <input class="form-control col-md-1" type="text" name="first_name" id="user_signup_last_name" placeholder="First name" ng-model="user.first_name" required >
    <span style="color:red" ng-show="myForm.last.$dirty && myForm.first_name.$invalid">
    <span class="col-md-1" ng-show="myForm.first_name.$error.required">First name required.</span>

But when I try changing the name to have [] the validation stops working.

    <input class="form-control col-md-1" type="text" name="user[first_name]" id="first_name" placeholder="First name" ng-model="user.first_name" required>
  <span style="color:red" ng-show="myForm.user[first_name].$dirty && myForm.user[first_name].$invalid">
  <span class="col-md-1" ng-show="myForm.user[first_name].$error.required">First name required.</span>

How do we do get angular to validate on the name attribute with [] ?
is there a way we can use id instead of name to check the validation?

Dvir · Accepted Answer · 2015-11-13 15:43:33Z

1

You can access the property by {{formName['user[first_name]'].$error}}

answered Nov 13, 2015 at 15:43

Dvir

3,3382 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Giridhar Bandi Over a year ago

is there a possibility regarding 2#

Dvir Over a year ago

Regarding to #2 I don't really know. But I think it's because id can't contains chars like [ or ].

Tyrone Wilson · Accepted Answer · 2016-03-30 13:47:25Z

Came across this issue today and the "escaping solution" didn't work for me.

In essence the form submission for rails works with [] but the ng-messages directive doesn't play well with this.

I created a directive that uses a pseudo-name attribute to handle the form stuff leaving the name attribute free for rails nested attribute syntax (in CoffeeScript)

angular.module 'myModule'
  .directive 'fieldName', ->
    directive =
      restrict: 'A'
      require: ['ngModel', '^form']
      scope:
        fieldName: '@fieldName'
      link: (scope, elem, attrs, controllers) ->
        modelCtrl = controllers[0]
        formCtrl = controllers[1]

        formCtrl[scope.fieldName] = modelCtrl
        return

To use this directive then I used the following (in haml)

%label My label
%input(ng-model='user_account.email' name='user_account[email]' required field-name='email' required type='email')
%div(ng-messages='form.email.$error')
    %span(ng-message='required') Required

Collectives™ on Stack Overflow

Angular form validation with name in square brackets

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related