Question

我有一个遗留应用程序，我正在尝试为客户端添加一些Angular表单验证功能，以便更好一些。它是一个WebForms应用程序，它使用的是Master Pages。

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

有没有办法可以用AngularJS中的ID而不是名字来引用控件？

My TextBox：

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

角色代码：

$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

我在网络表单上使用了角度，我认为最好不要将asp.net控件与angular混合使用。你有什么理由可以使用输入字段吗？

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

通过ID而不是名称

2 个答案: