Question

我正在尝试使用angularjs为我的输入文本框添加一个简单的验证，并尝试显示内联错误消息。我已经尝试了很多，但我仍然无法获得$valid，$ error，$invalid等。这些属性未定义。我已经给出了angularjs.js文件的引用。所有其他功能都有效，但不知道发生了什么。我是angularjs的新手，希望有人能在这方面帮助我。我的代码片段如下所示。

<sp-modal-dialog show='modalShown'>
    <label for="title">Title <span>*</span></label>
    <input type="text" name="txtTitle" ng-model="Model.Title" ng-maxlength="20" required>
    <div ng-show="popupForm.txtTitle.$invalid">Invalid:
    <span ng-show="popupForm.txtTitle.$error.required">Title is mandatory.</span>
    <span ng-show="popupForm.txtTitle.$error.maxlength">Title should contain atleast 20 characters.</span>
    </div>

编辑：我正在使用指令来显示弹出窗体。请参阅下面的代码。

//Directive to link the modalDialog as Element
contextualHelpModule.directive('spModalDialog', function () {
    return {
        restrict: 'E',
        scope: {
            show: '='
        },
        replace: true,
        transclude: true,
        link: function (scope, element, attrs) {
            scope.hideModal = function () {
                scope.show = false;
            };
        },
        template: '<form id="popupForm" name="popupForm"  novalidate><div ng-show="show"><div class="popup-main" ng-show="show"><div class="popup-container"><div class="popup-content" ng-transclude><div ng-click="hideModal()" class="popup-close">X</div></div></div></div><div class="popup-overlay"></div></div></form>'
    };

Answer 1

你需要把它包装成一个表格：

<form name="popupForm">
 <label for="title">Title <span>*</span></label>
 <input type="text" name="txtTitle" ng-model="Model.Title" ng-maxlength="20" required>
 <div ng-show="popupForm.txtTitle.$invalid">Invalid:
  <span ng-show="popupForm.txtTitle.$error.required">Title is mandatory.</span>
  <span ng-show="popupForm.txtTitle.$error.maxlength">Title should contain atleast 20 characters.</span>
 </div>
</form>

我希望它有所帮助。

Answer 2

是的，正如jvrdelafuente所解释的那样，你需要把它包装在

中

<form name="popupForm">

标签。一旦你这样做，那么你将通过popupForm.txtTitle。$ error.required等访问属性。否则，它们没有像你观察到的那样被定义。不幸的是，我最近了解到，如果您使用SharePoint母版页将表单标记放在aspx页面中，则母版页会放置自己的表单标记而不使用name属性。然后，ASP.NET将删除您的表单，因为它不允许表单中的表单。我仍然在寻找剩下的故事。

...更新

为了能够解决ASP.NET剥离AngularJS表单标记的问题，请使用ng-form标记：

<ng-form name="popupForm">
  <label for="title">Title <span>*</span></label>
  <input type="text" name="txtTitle" ng-model="Model.Title" ng-maxlength="20" required>
  <div ng-show="popupForm.txtTitle.$invalid">Invalid:
    <span ng-show="popupForm.txtTitle.$error.required">Title is mandatory.</span>
    <span ng-show="popupForm.txtTitle.$error.maxlength">Title should contain atleast 20 characters.</span>
  </div>
</form>

Answer 3

在表单的位置使用 ng-form ，它会正常工作，如下面的代码所示

<ng-form name="popupForm">
   <label for="title">Title <span>*</span></label>
   <input type="text" name="txtTitle" ng-model="Model.Title" ng-maxlength="20" required>
   <div ng-show="popupForm.txtTitle.$invalid">Invalid:
   <span ng-show="popupForm.txtTitle.$error.required">Title is mandatory.</span>
   <span ng-show="popupForm.txtTitle.$error.maxlength">Title should contain  atleast 20 characters.</span>
   </div>
</ng-form>

使用angularjs时表单验证错误

3 个答案: