Angular JS 和 ASP 服务器端控件验证答案

【问题标题】：Angular JS and ASP Server Side Control ValidationAngular JS 和 ASP 服务器端控件验证
【发布时间】：2016-06-26 05:00:20
【问题描述】：

我正在使用 Angular JS 进行 asp.net 服务器端控件

<div class="gridpage mb40" name="myForm" ng-model="myForm" ng-form
   <div class="form-group">
      <label class="">Name of the Supplier:</label>
        <asp:TextBox ID="txtSupName" CssClass="form-control" runat="server" ng-model="txtSupName" name="txtName" required></asp:TextBox>
        <p ng-show="myForm.txtName.$invalid && !myForm.txtName.$pristine" class="help-block">Your Name is Required.</p>
   </div>
 </div>

问题是在我部署代码的运行时，服务器端控件的名称属性更改，因此我无法呈现错误消息段有没有其他方法可以访问控制而不是 myform.txtName.$invalid？？

用 clientIDmode= Static 试过，它保持 id 静态但名称仍然改变，

【问题讨论】：

标签： asp.net angularjs validation server-side validationsummary

【解决方案1】：

试试这个解决方案jsfiddle。

创建一个指令alias，它存储对ngModelController的引用，它独立于输入（asp:TextBox）的name。

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, $log) {

  })
  .directive('alias', function() {
    return {
      restrict: "A",
      require: "ngModel",
      scope: {
        alias: "="
      },
      link: function(scope, elem, attr, ngModel) {
        scope.alias = ngModel;
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <form name="myForm">
      <input name="txtName" ng-model="txtName" required alias="aliasName" ng-pattern="/^[0-9]+$/">
      <div ng-if="myForm.txtName.$error.required">Name is reauired by name</div>
      <div ng-if="aliasName.$error.required">Name is reauired by alias</div>
      <div ng-if="myForm.txtName.$error.pattern">Invalid pattern by name</div>
      <div ng-if="aliasName.$error.pattern">Invalid pattern by alias</div>
      <br>
      <pre>myForm.txtName.$error = {{myForm.txtName.$error|json}}</pre>
      <pre>aliasName.$error = {{aliasName.$error|json}}</pre>
    </form>
  </div>
</div>

【讨论】：