Wie man die $ Fehlerwerte für Input-Tags manuell ändert - Angularjs

Ich übergebe ein Formular über den Winkel $ http und ich möchte einen Fehler geben, wenn der Benutzer die angularjs Validierung umgangen. Ich möchte das gleiche Fehler-Tag verwenden, als ob sie die Validierung nicht umgehen würden, userForm.name.$invalid && !userForm.name.$pristine Wie kann ich diesen Wert manuell setzen?

HTML

<body> 
    <form ng-controller="UserController" ng-model="userForm" name="userForm" ng-submit="createUser()"> 

     <legend>Create User</legend> 

     <label>Name</label> 
     <input type="text" id="name" name="name" ng-model="user.name" placeholder="User Name" required> 
     <!-- HERE IS WHERE THE ERROR SHOWS --> 
     <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" 

     <button class="btn btn-primary">Register</button> 

    </form> 
    </body>

WINKEL JS

$http({ 
    method : 'POST', 
    url : '/create', 
    data : user, 
    headers : { 
     'Content-Type' : 'application/x-www-form-urlencoded' 
    } 
    }) 
    .success(function(data) { 
    // I want to do something like this 
    name.$invalid = true; 
    name.$pristine = false; 
    });

ich so etwas tun wollen, was in der success Funktion ist. Daher wird die Fehlermeldung angezeigt.

Quelle

2016-06-02 Gary Holiday

Wenn Sie im HTTP-Erfolgsrückruf Zugriff auf den Bereich haben, können Sie dies tun, um die Gültigkeit festzulegen oder als fehlerhaft zu markieren.

scope.userForm.name.$setDirty();

ODER

scope.userForm.name.$setValidity('serverError', false); // creating a new field in $error and makes form field invalid.

Quelle

2016-06-02 16:18:26

Um die Gültigkeit oder unberührten Werte des Formulars, müssen Sie die Funktion von der form.FormController vorgesehen verwenden. Sie können das Formular auf makellos oder schmutzig setzen, aber Sie können ein Formular nicht direkt auf gültig festlegen. Sie müssen ein bestimmtes Modell auf ungültig setzen, wodurch der Formularwert auf ungültig gesetzt wird, wodurch das Formular ungültig wird (https://docs.angularjs.org/api/ng/type/form.FormController).

//UserController 
//$scope.userName is your object which has it's own controller using Angular Forms. 

app.controller("UserController", function($scope){ 
$http({ 
    method : 'POST', 
    url : '/create', 
    data : user, 
    headers : { 
     'Content-Type' : 'application/x-www-form-urlencoded' 
    } 
    }) 
    .success(function(data) { 
    // I want to do something like this 
    $scope.userForm.$setDirty(); //Sets $pristine to false; Alternatively, you could call $setPristine() to set $pristine to true 
    $scope.userForm.name.$setValidity("length",false); //In your case, the "length" validation is likely something different or will be generic. This enables you to have name fail validation based multiple rules (perhaps length and unique) 
    }); 
});

Quelle

2016-06-02 16:19:48

Wenn Sie ein bestimmtes Feld auf Gültigkeit überprüfen möchten, können Sie eine benutzerdefinierte Richtlinie verwenden:

app.directive('customValidation', function(dataService) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attrs, ctrl) { 
      ctrl.$parsers.unshift(function(viewValue){ 
       //first, assume the value is valid, until proven otherwise 
       ctrl.$setValidity('customValidation', true); 

       //check against the API 
       if(viewValue.length > 0 && !ctrl.$error.customValidation) { 
        dataService.checkValidity(viewValue).then(function(response){ 
         //API logic here 
         var results = response.data; 
         if(results.isNotValid) 
          ctrl.$setValidity('customValidation', false); 
        }).catch(function(response){ 
         //some error occurred 
         ctrl.$setValidity('customValidation', false); 
        }); 
       } 
      }); 
     } 
    }; 
});

es zu benutzen:

<input custom-validation ng-model-options="{updateOn: 'default blur', debounce: { 'default': 700, 'blur': 0 }}" />

Quelle

2016-06-02 16:24:03 Kyle

Wie man die $ Fehlerwerte für Input-Tags manuell ändert - Angularjs

Antwort

Verwandte Themen