Question

如果文本框为空或使用AngularJS未定义，我希望在单击时在标签上显示错误消息。

我是AngularJS的初学者。

请帮助解决此问题。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="form">
    <div ng-controller="formController">
        <label>Name: <input type="text" ng-model="user.name" /></label><br />
        <input type="submit" ng-click="update(user)" value="Save" />
        <pre>{{master | json}}</pre>
    </div>
    <script>
        angular.module('form', []).controller('formController', ['$scope', function ($scope) {
                $scope.master = {};
                $scope.update = function (user) {
                    debugger;
                    $scope.master = angular.copy(user);
                    if (user == undefined) {
                        debugger;
                        alert("Please enter text");
                    }
                };
            }]);
    </script>
</body>
</html>

Answer 1

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  
<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate ng-submit="Validate()">

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>

<span ng-show="ShowUserNameError">Username is required.</span>
</span>
</p>
</p>

<p>
<input type="submit" ng-click="Validate()">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.ShowUserNameError = false;
    $scope.user = '';
    $scope.email = '';
    $scope.Validate = function(){   
    if(!$scope.user)
    $scope.ShowUserNameError = true;
    else
     $scope.ShowUserNameError = false;
     
    }
});
</script>

</body>
</html>

Answer 2

以命名形式将输入括起来，命名输入，然后使用ng-show：

<div ng-controller="formController">
  <form name="form1">
    <label>Name: <span ng-show="form1.item1.$error">{{form1.item1.$error}}</span>
       <input name="item1" type="text" required ng-model="user.name" />
    </label><br />
        <input type="submit" ng-click="update(user)" value="Save" />
         <pre>{{master | json}}</pre>
   </form>
</div>

有关更多信息，请参见

想要在AngularJS的标签上显示错误消息

2 个答案: