角JS和ASP服務器端控制驗證

Question

我採用了棱角分明的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。$無效??

試圖與clientIDmode= Static，它使ID靜態的，而是名仍然改變，

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