.NET CSHTML文件中的AngularJS验证

.NET MVC cshtml文件中的angularjs验证不起作用

下面是我的代码：

cshtml代码：

<div id="addEditItem" class="modal" role="dialog">
    <form novalidate role="form" name="frmItem">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add Item Details</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" class="form-control" ng-model="id">
                    <div class="form-group">
                        <label for="name">Name:</label>
                        <input type="text" class="form-control" id="name" ng-model="name" maxlength="50" ng-required="true">
                        <span style="color:red" class="help-block" ng-if="frmItem.name.$error.required && frmItem.name.$dirty">*</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
                    <button type="submit" class="btn btn-success" ng-click="SaveItem()"><i class="fa fa-save"></i> Submit</button>
                </div>
            </div>
        </div>
    </form>
</div>

addEditItem是一个模式对话框。如果我单击提交警报（“获取记录时出错”）；如图所示。 我希望验证发生在cshtml级别，而不是java警报

---

我将删除CheckIsValid函数。我希望验证只发生在cshtml文件中

---

知道发生了什么吗？

在您附带的cshtml代码中，我只能找到“name”id，但您的检查功能也在检查“description”、“manufacturer”和“batchNo”。所有这些项都必须存在，否则函数返回false。 当所有项都存在且至少包含一个字符时，CheckIsValid（）函数将返回true。无论如何，一个好的开始是在检查代码中设置一个断点，看看为什么返回false。

Wordking

姓名：
*
日志

要添加您需要添加的内容：

• 在可从范围访问的输入上使用名称
• 使用ng show/ng hide进行验证，因为它会发生很多变化

---

您是否在视图中声明了应用程序和控制器？是的，我声明了。应用程序名称为medApp及其in\u布局文件。控制器在视图文件中，我将删除CheckIsValid函数。我的问题是在到达angular controller之前，它没有在cshtml文件中验证。好的，对不起。无论如何，如果

frmItem.name.$error.required

为真，为什么不将提交按钮设置为禁用状态？我的意思是，如果您想要一个简单的检查（存在值或不存在），所需的ng就足够了。如果你想创建一个更复杂的验证程序，你必须在角度的一侧编写你的自定义验证程序指令。@Jester。。我不是在看任何复杂的自定义验证器。这就是它在.NETRazor引擎UI中的工作方式。您添加了一个必需的验证器，就这样！！在cshtml中使用angularJS是不可能的吗？我将尝试这段代码并让您知道。谢谢你的时间，我试过密码了。它仍在运行angular controller中的display（）函数。我还将ng控制器添加到表单中，但仍然是一样的。为什么表单中有模态对话框？有什么特别的原因吗？@Jester…没有理由在表单中使用模态。你有不同的建议吗？在angular js中，你可以有一个单独的模态模板，并使用引导模态支持等。如果你看我的样品，没有模态

medApp.controller("itemController", function ($scope, itemService) {

    $scope.SaveItem = function () {
        var itemModel = {
            Id: $scope.id,
            Name: $scope.name,
            Description: $scope.description,
            Manufacturer: $scope.manufacturer,
            BatchNo: $scope.batchNo,
            ExpiryDate: $scope.expiryDate
        };
        if (!CheckIsValid()) {
            alert('Please fill the detail!');
            return false;
        }
        var requestResponse = itemService.AddEdit(itemModel);
        Message(requestResponse);
    };



    function CheckIsValid() {
        var isValid = true;
        if ($('#name').val() === '' || $('#description').val() === '' || $('#manufacturer').val() === '' || $('#batchNo').val() === '') {
            isValid = false;
        }
        return isValid;
    }
});

<form name="myForm">
    <input type="hidden" class="form-control" ng-model="id">
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" class="form-control" name="name" ng-model="name" maxlength="50" ng-required="true">
        <span style="color:red" class="help-block" ng-show="myForm.name.$error.required && !myForm.name.$valid">*</span>
    </div>
<button ng-click="display()">Log</button>
</form>