如果用户存在 angularjs，则在文本框旁边显示错误标签答案

【问题标题】：Display error label besides the textbox if the user exists angularjs如果用户存在 angularjs，则在文本框旁边显示错误标签
【发布时间】：2015-02-25 08:51:18
【问题描述】：

我有一个带有文本框用户名的注册表单。我想做的是当输入的用户名存在时，文本框旁边有一个标签显示“用户名存在”而不点击提交按钮。到目前为止我所做的是：http://jsfiddle.net/DharkRoses/s2qe3omh/2/ 任何帮助将不胜感激。

我的代码示例：

<div ng-app="myApp" ng-controller="check">
<div class = "container">
    <h3>Registration form</h3>    
      <form name = "myForm">
             <label>Username:</label>
                <input type = "text" id = "user" ng-model="username"></input>
             <div class="msg-block" ng-show="myForm.$error"> <span class="msg-error" ng-show="myForm.user.$error.user">User exists.</span> 
     </form>
    <button ng-click = "userExists(username)">Submit</button>

【问题讨论】：

标签： html angularjs

【解决方案1】：

您的客户端需要一组用户（就安全性而言，这不是一个好的做法）。

   var app = angular.module("myApp", []);
    app.controller('check', function ($scope) {

        $resource('someUrl').query({}, function(users){
             $scope.users = users;  //users is : ["foo", "bar", "admin", ...]
        }, function (error){
             //handle error here
        });

        $scope.userExists = function(username){
            if($scope.users.indexOf(userName) > 0){
                alert("user exists!");
            }else {
                alert("save");
            }
        };


    });

【讨论】：

【解决方案2】：

不要调用函数提交按钮，而是在输入框中使用它（根据您的要求使用 ng-blur 或 ng-change）。

    <input type = "text" id= "user" ng-model="username" ng-blur="userExists(userName)"></input>
    <div ng-if="existingUser">User already exists !!!</div>

在你的函数中，

$scope.userExists = function(username){
            if($scope.users.indexOf(userName) > 0){
                $scope.existingUser=true;
            }else {
                $scope.existingUser=false;
            }
        };

您可以根据 existingUser 变量的值显示错误消息

【讨论】：