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>

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

如何验证Bootstrap 3 angularJS表单？

3 个答案: