javascript - 如何验证 Bootstrap 3 angularJS 表单？

Question

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

事情是这样的:对于我的第一次输入，当我没有选择 radio 时甚至在我选择时都会出现该消息。

<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 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.$有效
4. 您在 ng-app 中的应用程序名称不正确，您提到了“myapp”，在脚本文件中它是“owmuchApp”。我在这两个地方都使用了“owmuchApp”