如何验证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

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

ng-app="myApp" 

代替

ng-app="owmuchApp".

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

看到这个矮子工作

Answer 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

这是工作解决方案

更新资料

我忘了提到我在显示消息中添加了新条件：

<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

这是更新的矮人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。$无效
   • ！myForm。$ valid
4. 您在ng-app中提到的“ myapp”应用程序名称不正确，在脚本文件中为“ owmuchApp”。 我在两个地方都使用过“ owmuchApp”