Угловые JS и управления сервером Side ASP Validation

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. $ invalid ??

пытался с clientIDmode= Static, он сохраняет идентификатор статичными, но имя все еще меняется,

Answer 1

Попробуйте это решение jsfiddle.

Создать директиву alias, в которой хранится ссылка на ngModelController, которая не зависит от ввода name (asp: TextBox).

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>