ページをリロードせずにエラーメッセージをクリアする

これがライブデモです。

あなたのコードは少し厄介なようで、必要のないものを運んでいます。以下で私が変更したコードを確認し、あなたのコードと比較してください。あなたはリアルタイムのシナリオで作業していて、http通話を使用しています。私の場合、目的を完全にするために、array例を取り上げました。それはあなたとまったく同じように動作します。以下は、私があなたのコードに加えた変更です。

• ng-changeの代わりにng-blur。
• 携帯電話番号が存在するかどうかを確認するために、もう1つのメソッドcheckIfNumberExistsを作成しましたdatabase（私の場合は配列です）。参考までに、このロジックはサーバーに存在する必要があります。
• 余分な変数を使用する必要はありません$scope.showエラーメッセージを表示するには、それ以外の何の使用formのspanさんng-showのメッセージ。ここで、requiredから削除したことに注意してくださいng-show。
• mobilenoCheckFunメソッドstringで、単一のスペースの代わりにメッセージを表示したくない場合は、空白を使用します。

それで全部です。あなたは残りのコードを理解するのに十分賢いです。

HTML

<form ng-app="myApp" name="signupForm" ng-controller="MyCtrl">
  <div class="form-group col-xs-6">
    <input type="text" ng-model="user.MobileNo" placeholder="Mobile Number" 
    name="mobile" required ng-maxlength="10" maxlength="11" id="default1" 
    ng-change="mobilenoCheckFun(user.MobileNo);">
   <span ng-show="signupForm.mobile.$error">{{serverMessage1}}</span>
   </div>
</form>

AngularJS

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

    $scope.checkIfNumberExists = function(list, mobileno){
    if(list.length != null && list.indexOf(mobileno) > -1)
        return true;
    else 
        return false;
  }

    $scope.mobilenoCheckFun=function(mobileno)
  {
        //define an array to check If 'mobileno' exists, in your case this check happens at server side. but the logic is same. This list is fetched from DB in your case
        var list = ["8123791223", "8123791225", "8123791221", "8123791203"];
      var result = $scope.checkIfNumberExists(list, mobileno);
      if(result)
        $scope.serverMessage1="Mobile Number Exits";
      else
         $scope.serverMessage1="";    
  }
});

役に立ったかどうかお知らせください。

編集-1

コメントでのあなたの要求に従って、私はこのアップデートを提供しています。

ライブデモを更新

デフォルトでは、serverMessage1を空白のままにし、mobileno lengthにチェックを入れて、Webサービス呼び出しをスキップします。mobileno lengthが10の場合、引き続きWebサービス呼び出しを行います。

$scope.mobilenoCheckFun=function(mobileno)
  {
        //define an array to check If 'mobileno' exists, in your case this check happens at server side. but the logic is same. This list is fetched from DB in your case
      $scope.serverMessage1="";
      if(mobileno.length != 10) return;
        var list = ["8123791223", "8123791225", "8123791221", "8123791203"];
      var result = $scope.checkIfNumberExists(list, mobileno);
      if(result)
        $scope.serverMessage1="Mobile Number Exits";
      else
         $scope.serverMessage1="";    
  }

編集-2

質問を変更し、のemailフィールドも検証したいと考えていformます。これは、も検証するデモemailです。

  //this method has been modified and is made common method for both the checks (mobile and email)
  $scope.checkIfExists = function(list, input){
  	if(list.length != null && list.indexOf(input) > -1)
    	return true;
    else 
    	return false;
  }
  
  $scope.validateEmail = function(email) 
  {
      var regEx = /\S+@\S+\.\S+/;
      return regEx.test(email);
  }
  
  $scope.emailIdCheck=function(emailid)
  {
  	$scope.invalidEmailMsg = "";
    $scope.serverMessage2 = "";
    if(emailid.length == 0) return;
  	//first check whether email id is valid or not
  	var isEmailValid = $scope.validateEmail(emailid);//
    if(isEmailValid){
    	//if valid then make a service call to check whether it exists in database or not, in my case i'm checking it in array
        var emailList = ["[email protected]", "[email protected]", "[email protected]", "[email protected]"];
        var result = $scope.checkIfExists(emailList, emailid);
        if(result)
          $scope.serverMessage2="Email Id Exits";
        else
          $scope.serverMessage2="";   
    }else{
    	//if it's not valid, do nothing, just show a message
    	$scope.invalidEmailMsg = "Invalid Email Id";
      return;
    }
  }

<div class="form-group col-xs-4">
    <input type="text" ng-model="user.Email" placeholder="Email Id" name="email" required ng-change="emailIdCheck(user.Email);">
    <span>{{invalidEmailMsg}}</span>
    <span ng-show="signupForm.email.$error">{{serverMessage2}}</span>
    <span ng-show="signupForm.email.$error.required" class="help-block">Email Id is Required</span>
</div>

注-必要に応じて、を変更しRegular Expressionてemailフィールドを検証できます。ここにあるリンクをたくさん提供してRegular Expressions検証するにはemail。