AngularJS cannot see required field

Question

I need to make sure the name input matches the pattern. AngularJS cannot see name and set required error although they are reside in one div. It's not rational to start declatation from form bacause it has a lot of divs without names. How to make required field visible to Angular?

<form ng-app="" ng-controller="myCtrl" action="" name="productForm" class="form-horizontal" id="addproductForm" role="form" novalidate>
    <div class="form-group" ng-class="{ 'has-error': productName.$invalid }">
        <label for="product_name" class="col-sm-3 control-label">product name: </label>
        <div class="col-sm-8">
            <input id="product_name" name="productName" type="text" ng-model="testproductName" ng-pattern='/^[a-zA-Z0-9_.-]*$/' required/>
        </div>
    </div>
 </form>

meriadec · Accepted Answer · 2014-09-23 08:55:59Z

3

You need ng-model in your input attributes to makes angular observe it. And your errors need to be attached to your form name.

See this :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>

  <form name="form">
    <input ng-model="test" name="myField" required>
    <span ng-show="form.myField.$error.required">Required</span>
  </form>
  
</div>

answered Sep 23, 2014 at 8:55

meriadec

2,98321 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

AngularJS cannot see required field

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related