Question

我正在尝试使用bootstrap和angularjs验证输入字段。在下面的示例html代码中，如果输入字段无效或为空，但我无法使用该代码，则尝试验证输入字段并在气球上显示错误（输入有效输入。）。

请找到演示：http://next.plnkr.co/edit/WoQC2jugwxpG2bc9

示例代码：

<div>
     Single/Multiple email:
    <input type="email" class="form-control" multiple-emails required 
           name="recipientEmail" ng-model="recipientEmail">
    <div ng-show="shareSelectionForm.$submitted || shareSelectionForm.recipientEmail.$touched">
        <p class="error-mesg" ng-show="headerForm.recipientEmail.$error.required">
          Enter the Valid input..
        </p>
    </div>
</div>
<button class="btn btn-primary" type="button" ng-click="submitForm()">
  Submit
</button>

有输入吗？

Answer 1

您无法检查是否使用shareSelectionForm。$ submitted提交了表单。

在submitForm（）函数中，

添加$ scope.submitted = true;

并在html中使用此变量来检查表单是否已提交

<div>
     Single/Multiple email:
    <input type="email" class="form-control" multiple-emails required 
           name="recipientEmail" ng-model="recipientEmail">
    <div ng-show="submitted || shareSelectionForm.recipientEmail.$touched">
        <p class="error-mesg" ng-show="shareSelectionForm.recipientEmail.$error.required">
          Enter the Valid input..
        </p>
    </div>
</div>
<button class="btn btn-primary" type="button" ng-click="submitForm()">
  Submit
</button>

在段落的ng-show中，您使用了不同的表单名称-headerForm。表单名称为shareSelectionForm。

无法验证表单并显示错误消息

1 个答案: