Standardfehlermeldung in AngularJs ausblenden

Question

Wie blende ich eine Standardfehlermeldung in AngularJs aus? Ich habe versucht Anzeige: keine;. Aber es wird nicht funktionieren. Ich bin neu bei AngularJS. Ich möchte die Standardfehlermeldung ausblenden, und ich möchte die Fehlermeldung anzeigen, wenn Benutzer das Eingabetextfeld onfocus.

<p> 
    <label for="first_name">First Name</label> 
    <input type="text" name="first_name" id="first_name" ng-model="firstName" ng-pattern="/^[a-zA-Z\s]*$/" required/> 
    <span class="error" ng-messages="contact_form.first_name.$error"> 
     <span ng-message="required">First name should not be empty</span> 
     <span ng-message="pattern" ng-show="contact_form.first_name.$error.pattern">Only alphabets allowed</span> 
    </span> 
</p> 

Answer 1

Dies ist, was Sie brauchen, contact_form.first_name.$dirty wenn Feld oder nicht

geändert wurde zu prüfen, verwendet wird

<form name="contact_form" novalidate>  
    <p> 
     <label for="first_name">First Name</label> 
     <input type="text" name="first_name" id="first_name" ng-model="firstName" ng-pattern="/^[a-zA-Z\s]*$/" required/> 
     <span class="error" ng-messages="contact_form.first_name.$error"> 
      <span ng-message="required" ng-show="contact_form.first_name.$error.required && contact_form.first_name.$dirty">First name should not be empty</span> 
      <span ng-message="pattern" ng-show="contact_form.first_name.$error.pattern">Only alphabets allowed</span> 
     </span> 
    </p> 
</form> 

Answer 2

In Ihrem Controller Sie eine Variable erstellen können, um zu bestimmen, ob das Formular sumbitted worden sind:

app.controller('NameController', ['$scope', function($scope) { 
    $scope.submitted = false; 

    $scope.formProcess = function(form) { 
    $scope.submitted = true; 
     // logic 
    } 
}]); 

als in der Ansicht:

<form ng-submit="formProcess(form)"> 
    <p> 
     <label for="first_name">First Name</label> 
     <input type="text" name="first_name" id="first_name" ng-model="firstName" ng-pattern="/^[a-zA-Z\s]*$/" required/> 
     <span class="error" ng-if="submitted" && ng-messages="contact_form.first_name.$error"> 
      <span ng-message="required">First name should not be empty</span> 
      <span ng-message="pattern" ng-show="contact_form.first_name.$error.pattern">Only alphabets allowed</span> 
     </span> 
    </p> 
    <p> 
     <button class="btn btn-secondary" type="submit">Send</button> 
    </p> 
</form>