AngularJs

Question

我正在尝试显示不适用于以下代码的文本字段的验证消息 -

<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>

Answer 1

在某些情况下，

AngularJS 具有您将用来代替 HTML 属性的绑定。不要在 <input> 上使用原生 HTML5 required 使用 ng-required="true".

（编辑）link 相关文档：https://docs.angularjs.org/api/ng/directive/ngRequired#!

（编辑）：在您的特定情况下，调用您的指令的模板中的表单名称在您的指令中不可访问。我们给指令形式一个唯一的名字。

此外，使用 angularjs 显示您的（自定义）错误消息可以使用 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>

AngularJs - 在组件中显示验证消息

AngularJs - Display Validation Message within Component