AngularJs - Display Validation Message within Component-CodePudding

I am trying to display validation message for text field which is not working for below code -

<form name="dummy">
<bloglist></bloglist>
</form>

<script type="text/ng-template" id="my">
 <div>
  <input type="text" name="first" ng-model="sample.hai" required/>
  <span ng-show="dummy.first.$error.required">Required</span> 
</div>
</script>


<script>
angular.module("DemoApp" [])
 .component( 'bloglist' , {
   templateUrl: 'my.html',
   controller: function ($scope) {

   }
});
</script>

CodePudding user response：

AngularJS has bindings that you will use in place of HTML attributes in some cases. Instead of using native HTML5 required on your <input> use ng-required="true".

(edit) link to relevant documentation: https://docs.angularjs.org/api/ng/directive/ngRequired#!

(edit): In your particular case, the form name in the template that invokes your directive is not accessible inside your directive. We give the directive form a unique name.

Additionally, using angularjs to display your (custom) error message can be done using ngMessages.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-messages.js"></script>

<body ng-app="DemoApp">
  <form name="dummy">
    <bloglist></bloglist>
  </form>
</body>
<script src="/scripts/vendors/angular-messages/angular-messages.js"></script>
<script type="text/ng-template" id="my.html">
  <div ng-form="directiveForm">
    <input type="text" name="first" ng-model="sample" required/>
    <pre>{{ directiveForm.first.$error | json }}</pre>
    <div ng-messages="directiveForm.first.$error" style="color:maroon" role="alert">
      <div ng-message="required">You did not enter a field</div>
    </div>
  </div>
</script>


<script>
  angular.module("DemoApp", ['ngMessages'])
    .component('bloglist', {
      templateUrl: 'my.html',
      controller: function($scope) {

      }
    });
</script>