Question

This plunk的表单只包含允许输入aaa的字段。请注意，错误消息是在控制器中设置的，而不是在html中。当用户点击Submit时，他们应该会看到该消息，但不会显示该消息。这段代码出了什么问题？

HTML

<body ng-app="ngMessagesExample" ng-controller="ctl">

  <form name="myForm" novalidate ng-submit="submitForm()">
    <label>
      This field is only valid when 'aaa' is  
      <input type="field1"
             ng-model="data.field1"
             name="field1"
             required />
    </label>
    <div ng-messages="myForm.field1.$error" style="color:red">
        <div ng-message-exp="required">{{errorMsg}}</div>
    </div>

  <br/><br/>
  <button style="float:left" type="submit">Submit</button>
</form>

</body>

的Javascript

var app = angular.module('ngMessagesExample', ['ngMessages']);

app.controller('ctl', function ($scope) {

  $scope.submitForm = function() {
    if ($scope.field1 != 'aaa')
        $errorMsg = "This field should be 'aaa'";
    else
        $errorMsg = "";
  };      

});

Answer 1

忘记我之前的回答。实际上，最简单，最强大的是制定新的指令。

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"    
                xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
                xmlns:tmp="http://tempuri.org/ExportDataSet.xsd">
    <xsl:output method="xml" indent="yes"/>

  <xsl:template match="tmp:ExportDataSet" >
    <xsl:element name="Declarations">
      <xsl:apply-templates select="tmp:Document" />
    </xsl:element>
  </xsl:template>

  <xsl:template match="tmp:Document">

你的控制器：

var app = angular.module('ngMessagesExample', ['ngMessages']);
app.directive("aaa", function() {
    return {
        restrict: "A",

        require: "ngModel",

        link: function(scope, element, attributes, ngModel) {
            ngModel.$validators.aaa = function(modelValue) {  
                return modelValue === 'aaa';
            }
        }
    };
});

您的HTML应该是这样的：

app.controller('ctl', function ($scope) {

  $scope.data = {
    field1: ""
  }
  $scope.submitForm = function(){
     //extra whatever code
  }
});

如何使用动态ngMessages验证表单

1 个答案: