如何验证 Bootstrap 3 angularJS 表单？

Question

我有一个包含一些输入类型文本、输入类型编号、复选框、单选、选择选项和提交按钮的表单。 我想验证每个输入。如果未填写所需的输入，我想显示一条消息。

这就是发生的事情： 对于我的第一次输入，当我没有选择收音机时，即使我选择了，也会出现该消息。

<div class="form-group has-feedback">
    I am : <br>
    <label class="radio-inline">
        <input type="radio" ng-model="sex" name="sex" id="sex" value="femme"> <strong>Woman</strong>
    </label>
    <label class="radio-inline">
        <input type="radio" ng-model="sex" name="sex" id="sex" value="homme"> <strong>Man</strong>
    </label>

    <div ng-show="form.sex.$error.required">
        <p class="help-block">
            Sex is required
        </p>                        
    </div>
</div>

我想念其他输入的相同内容。我没有看到我错过了什么？

其次，我想在输入出现错误时禁用提交按钮。这不起作用。这是我的代码：

<button ng-click="sendMessage();" class="btn btn-success pull-center" ng-disabled="form.$invalid" type="submit">Let me know</button>

您可以在Plunker 上查看完整代码。 感谢您的帮助

Answer 1

首先，您的 plunker 添加了一个错误。你在哪里使用

ng-app="myApp" 

而不是

ng-app="owmuchApp".

您的验证效果很好。我刚刚在单选按钮中添加了“必需”指令，并且......它起作用了！

看到这个plunker工作

Answer 2

您有 2 个问题，首先是您的应用程序模块的名称错误， （script.js 中的“owmuchApp”和index.html 中的“myApp”）所以应用程序甚至没有加载。

您需要这样设置单选按钮组的 ng-required 字段：

<input type="radio" ng-model="sex" ng-required="!sex" name="sex" id="sex" value="femme"> Woman
<input type="radio" ng-model="sex" ng-required="!sex" name="sex" id="sex" value="homme"> Man

Here 是可行的解决方案

更新

我忘了提到我在节目消息中添加了一个新条件：

<div ng-show="form.sex.$dirty && form.sex.$invalid">
  <p ng-show="form.sex.$error.required" class="help-block">
    Sex is required
  </p>
</div>

仅当用户尝试提交表单时才会显示，否则会在表单呈现后立即显示消息。

Answer 3

这是更新的 plunker http://plnkr.co/edit/ZfUE3uEjklJ2pow46Gs8?p=preview

<button ng-click="sendMessage();" class="btn btn-success pull-center" ng-disabled="!myForm.$valid" type="submit">Let me know</button>

1. 对所有要验证的字段使用名称属性。
2. 使用表单名称访问错误变量。在您的情况下，它是“myForm”。
3. 您可以使用以下表达式禁用表单：
   • myForm.$invalid
   • !myForm.$valid
4. 您的应用程序名称在您提到的“myapp”的ng-app 中不正确，在脚本文件中它是“owmuchApp”。我在这两个地方都使用过“owmuchApp”