通过 ID 而不是名称在 AngularJS 中引用 ASP.NET 文本框控件

Question

我有一个遗留应用程序，我正在尝试为客户端添加一些 Angular 表单验证功能，使其变得更好一些。这是一个 WebForms 应用程序，它使用母版页。

我运行遇到的问题是，当我尝试验证表单时，我需要通过 ASP.NET 自动生成的名称属性来引用控件（即使 ClientIDMode = Static）。我无法将控件更改为不在服务器端。

有没有一种方法可以让我在 AngularJS 中通过 ID 而不是名称来引用控件？

我的文本框：

<asp:TextBox runat="server" data-ng-model="formObj.textValue" ID="txtTextBox" CssClass="form-control" ClientIDMode="Static" MaxLength="100" required />

Angular代码：

$scope.validateForm = function (myForm) {
    if (myForm.txtTextBox.$invalid) {
        return true;
    }

    return false;
};

它作为错误返回，因为 .NET 将名称生成为

<input name="ctl00$Content$txtTextBox" maxlength="100" id="txtTextBox" class="form-control ng-pristine ng-untouched ng-binding ng-invalid ng-invalid-required ng-valid-maxlength" data-ng-model="formObj.textValue" required="">

我不想将 ctl00$Content$txtTextBox 硬编码到名称中，因为如果有人移动控件或更改结构，这很容易更改。有什么方法可以通过始终相同的 ID 值来引用控件吗？或者我可以使用其他一些 .NET / Angular 魔法来解决这个问题吗？

感谢任何帮助！

Answer 1

方法是通过id获取元素名称，然后使用带有[ ]符号的名称进行验证。

试试下面的方法。

myForm[document.getElementById("txtTextBox").getAttribute("name")].$invalid

这是 Plunker https://plnkr.co/edit/WMQ4Fb579PUW9C5t3124

Answer 2

我在 Web 表单上使用过 angular，我认为最好不要将 asp.net 控件与 angular 混合使用。为什么只能使用输入字段？

但如果您确实必须使用它，要解决您的特定问题，您可以使用 ClientIDMode

通过 ID 而不是名称在 AngularJS 中引用 ASP.NET 文本框控件

Reference ASP.NET TextBox Control in AngularJS by ID instead of Name

c#

asp.net

webforms

angularjs