Ng-required does not work when submitting a form

Question

I have the following code in the input text field with the required attribute, but when I exit the field or submit the form, it does not stop the form submission and informs the user about the need for this field.

<div class="col-sm-8">
   <input type="text" ng-required="true" class="form-control" 
    placeholder="Enter Total Amount" id="txtTotalAmount" 
    ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
</div>

What do I need to do to make the right directive?

Answer 1

To do this, you must fire an ng-submitevent when the form is valid.

ng-submit="myForm.$valid && submit()"

It looks like you also missed the attribute namein your input field, and also you could use the ng-show/ directive to display the errorng-messages

<form name="myForm" ng-submit="myForm.$valid && submit()">
   <div class="col-sm-8">
      <input type="text" ng-required="true" class="form-control" placeholder="Enter Total Amount" name="txtTotalAmount"
       id="txtTotalAmount" ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
      <span ng-show="myForm.txtTotalAmount.$error.required">Required</span>
   </div>  
</form>