CODEWITHSUNDEEP
javascriptangularjs
J.Olufsen
J.Olufsen

Reputation: 13915

AngularJS cannot see required field

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>

Upvotes: 0

Views: 48

Answers (1)

meriadec
meriadec

Reputation: 2983

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>

Upvotes: 3

Related Questions