AngularJS 中的表单验证无法按预期工作

Question

我有一个角形。我正在尝试对必填字段进行一些验证，例如在 this nice 教程中，它说 angular 具有“内置”此功能。但是-它对我不起作用。当我在未填写字段的情况下提交表单时，什么也没有发生。谁能明白为什么？

    <form id = "myForm" name="myForm" novalidate>

                        <div class="form-group" ng-class="{ 'has-error' : myForm.name.$invalid && !myForm.name.$pristine && submitted }">
                        <input type="text" name="name" class="form-control" ng-model="company.name" required>
                        <p ng-show="myForm.name.$invalid && !myForm.name.$pristine" >Your firm's name is required.</p>
                        </div>
                        <br />
                        <br />
                        <div class="form-group" ng-class="{ 'has-error' : myForm.address.$invalid && !myForm.address.$pristine && submitted }">
                        <input type="text" class="form-control" id = "address" name="address"  ng-model="company.address" required>
                         <p ng-show="myForm.address.$invalid && !myForm.address.$pristine" class="help-block">Your address is required.</p>
                        </div>

<button type="submit" ng-click= "createAccount()" class="btn btn-small btn-primary">GO

    </button>

        </form>

我还在我的 createAccount() 函数中包含了$scope.submitted = true;。

Answer 1

请记住，AngularJS 是一个客户端框架。您的验证必须在您提交内容之前执行。

将ng-disabled 添加到您的提交按钮：

<button type="submit" ng-disabled="myForm.$invalid" ng-click= "createAccount()" class="btn btn-small btn-primary">GO</button>

或者在您所指的教程示例中检查createAccount() 函数中的验证状态：

if (!$scope.myForm.$valid) {
   alert('Something is wrong');
}