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

【问题标题】：unable to validate the form and show the error message无法验证表单并显示错误消息
【发布时间】：2018-12-16 03:14:49
【问题描述】：

我正在尝试使用 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>

任何输入？

【问题讨论】：

标签： javascript html angularjs twitter-bootstrap

【解决方案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。

【讨论】：