javascript - Angular JS 将表单字段设置为无效

Question

我正在尝试向我的 angular js 应用程序添加一些服务器端表单验证。我很难使表单字段无效并显示错误消息。

我的基本应用程序如下所示:

我有一个带有 Controller 的模型“客户端”

Accounts.controller('Client', ['$scope', 'ClientService', function ($scope, ClientService) {
    $scope.loading = false;
    $scope.errors = null;

    $scope.init = function () {
         $scope.abn = "some value from API call";
    };

    $scope.save = function (client) {
            $scope.form.abn.$setValidity("server", false);
            $scope.errors.abn = "Error message";
    }

    $scope.init();
}]);

和一个表单 View

<form name="form">
    <div class="form-group">
        <label>ABN Number</label>
        <input type="text" name="abn" ng-model="client.abn">
        <span ng-show="form.abn.$error.server">{{client.errors.abn}}</span>
    </div>
    <button ng-click="save(client)">Save</button>
</form>

和这样的应用

var Accounts = angular.module('Accounts', [
    'ngRoute',
    'ui.select2',
    'ui.router'
])
.config(function ($stateProvider, $routeProvider) {
    $routeProvider.otherwise('/404');

    $stateProvider
        .state('client', {
            url: "/client",
            templateUrl: "client",
            controller: 'Client'
        })
        .state('404', {
            url: "/404",
            templateUrl: "/error/e404/"
        });

});

有人能给我提供一个示例，说明我应该如何将 abn 字段设置为无效并显示错误消息吗？

Answer 1

显示错误的方式应该是这样的:

从 $error.server 更改为 $invalid:

<span ng-show="form.abn.$invalid">{{client.errors.abn}}</span>

我为 ng-invalid 类添加了一个样式，并创建了一个 plunkr，在您按下保存按钮后，该字段变为红色并显示 errorMessage。在 $scope.errors 上设置属性时还有另一个错误，因为它是 null。

http://plnkr.co/fDWF5g