Question

在我的Angular应用程序中，我需要在提交表单时显示错误。使用以下代码，标签永远不会显示。

知道我做错了什么吗？

    <form name="addLocationForm" ng-submit="submitForm(addLocationForm.$valid)" novalidate>
        <label for="name">Name</label>
        <input id="name"
               type="text"
               ng-model="locationName"
               ng-required="true"
               ng-minlength="4"
               ng-maxlength="128">
        <span class="text-error" data-ng-show="addLocationForm.submitted && addLocationForm.name.$invalid">Name is required</span>
        <button type="submit">Add</button>
    </form>

--------------------------------------在控制器中

   // Submit the form after all validation has occurred         
    $scope.submitForm = function (isValid) {
        // Is form valid?
        if (isValid) {
            // Create a location
            var location = {
                Id: null,
                Name: $scope.locationName
            };
            locationsService.addLocation(location).then(
                    function () {
                        alert('Saved');
                        _getLocations();
                    },
                    function (data) {
                        // Handle error
                        alert(data.data.modelState.location[0]);
                    }
                );
        }
    };

Answer 1

我会改变以下内容：

  <span class="text-error" data-ng-show="submitted && addLocationForm.name.$invalid">Name is required</span>

<button type="submit" data-ng-click="submitted=true">Add</button>

或者您可以尝试这样的事情：

   <form name="loginForm" novalidate 
     ng-app="LoginApp" ng-controller="LoginController" ng-submit="login()">
     <div class="form-group">
       <input class="form-control" name="username" type="text" 
         placeholder="Username" required ng-model="session.username" />
       <span class="help-block" 
         ng-show="loginForm.username.$error.required">Required</span>
     </div>
     <div class="form-group">
       <input class="form-control" name="password" type="password" 
         placeholder="Password" required ng-model="session.password" />
       <span class="help-block" 
         ng-show="loginForm.password.$error.required">Required</span>
     </div>
     <div class="form-group">
         <button type="submit" class="btn btn-primary pull-right" 
           value="Login" title="Login" ng-disabled="!loginForm.$valid">
           <span>Login</span>
         </button>
     </div>
   </form>

使用ng-show，您可以添加require，minlength，maxlength等...

此链接也可以帮助您：http://www.ng-newsletter.com/posts/validations.html

Answer 2

这解决了我的问题

        <h2>Insert a Location</h2>
        <form name="addLocationForm" ng-submit="submitForm(addLocationForm.$valid)" novalidate>
            <label>Name</label>
            <input type="text"
                   name="name"
                   ng-model="location.name"
                   ng-minlength=3
                   ng-maxlength=20
                   ng-required="true" />
            <div class="error-container" ng-show="addLocationForm.name.$dirty && addLocationForm.name.$invalid">
                <span class="error" ng-show="addLocationForm.name.$error.required">Name is required</span>
                <span class="error" ng-show="addLocationForm.name.$error.minlength">Name has to be at least 4 characters long</span>
                <span class="error" ng-show="addLocationForm.name.$error.maxlength">Name cannot be longer than 128 characters</span>
            </div>
            <button type="submit">Add</button>
        </form>



// Submit the form after all validation has occurred            
$scope.submitForm = function (isValid) {
    // Is form valid?
    if (isValid) {
        // Create a location
        var location = {
            Id: null,
            Name: $scope.location.name
        };
        locationsService.addLocation(location).then(
                function () {
                    alert('Saved');
                    _getLocations();
                },
                function (data) {
                    // Handle error
                    alert(data.data.modelState.location[0]);
                }
            );
    }
};

验证表单时如何显示跨度？

2 个答案: