AngularJS benutzerdefiniertes Formular steuert die Überprüfung

Ich habe Probleme mit der Validierung von benutzerdefinierten Formularsteuerelementen in AngularJS.AngularJS benutzerdefiniertes Formular steuert die Überprüfung

Die beiden Themen sind:

Ich möchte einen benutzerdefinierten Fehler auszulösen, wenn der Platzhalter/ursprüngliche Text wurde innerhalb des Inhalts editierbares Feld nicht geändert worden. Ich habe verschiedene Ansätze ausprobiert - aber ohne Glück (einschließlich zu versuchen, $isValid zu bearbeiten).
Gelöst: Ich kann nicht scheinen, die ng-show zu den Fehlermeldungen auslösen, sie erscheinen zu lassen, wenn ng-minlength, ng-maxlength und ng-required ungültig sind. (Antwort: Ich habe keinen Namen attr auf dem div)

Bitte beachten Sie die Plnkr unten und Codebeispiele:

https://plnkr.co/edit/Up6Q4D7cMDQQxCodLrpE?p=preview

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-example40-production</title> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
    <script src="script.js"></script> 
</head> 

<body ng-app="form-example2"> 
    <form name="myForm"> 
     <div contentEditable="true" ng-model="standfirst" title="Click to edit" ng-required="true" ng-minlength="5" ng-maxlength="20">Some People</div> 
     <p ng-show="myForm.standfirst.$error.required" class="text-danger">You did not enter a standfirst</p> 
     <p ng-show="myForm.standfirst.$error.minlength" class="text-danger">Your standfirst is too short</p> 
     <p ng-show="myForm.standfirst.$error.maxlength" class="text-danger">Your standfirst is too long</p> 
    </form> 
    <pre>model = {{content}}</pre> 

    <style type="text/css"> 
     div[contentEditable] { 
      cursor: pointer; 
      background-color: #D0D0D0; 
     } 
    </style> 
</body> 

</html>

(function(angular) { 
    'use strict'; 
    angular.module('form-example2', []).directive('contenteditable', function() { 
     return { 
      require: 'ngModel', 
      link: function(scope, elm, attrs, ctrl) { 
       // view -> model 
       elm.on('blur', function() { 
        ctrl.$setViewValue(elm.html()); 
       }); 

       // model -> view 
       ctrl.$render = function() { 
        elm.html(ctrl.$viewValue); 
       }; 

       // load init value from DOM 
       ctrl.$setViewValue(elm.html()); 
      } 
     }; 
    }); 
})(window.angular);

Quelle

2016-05-05 David Anderton

Sie keine Eingabe mit dem Namen haben 'überall auf dem Formular standfirst'. – ryanyuyu

Was soll diese Richtlinie auch tun? Es ist nicht wirklich klar. – ryanyuyu

@ryanyuyu Die Direktive war nur ein Beispiel für ein Beispiel für benutzerdefinierte Formularkomponenten in der eckigen Dokumentation. Ich habe meine Frage nach Ihren Kommentaren geändert –

Sie können $pristine verwenden, um zu überprüfen, ob der Eingabewert geändert wurde.

<p ng-show="myForm.standfirst.$pristine" class="text-danger">Your start error message</p>

Da Sie in Ihrer Anweisung einen Wert beim Start festlegen, müssen Sie das Formular zurücksetzen. Das erreichen Sie, ctrl.$setPristine(), um Ihren Code

// load init value from DOM 
ctrl.$setViewValue(elm.html()); 
ctrl.$setPristine();

Quelle

2016-05-05 22:11:57

Dann würde ich die Prüfung "$ pristine" auf die "ng-disabled" der Schaltfläche "Senden" verwenden? Um eine ungültige Eingabe zu verhindern .. –

Sie können '$ valid' verwenden, um eine ungültige Eingabe zu verhindern. Um ein unverändertes Senden zu verhindern, können Sie '$ makellos 'verwenden. Ich überprüfe immer das 'ng-disable' Attribut, aber Sie können es auch innerhalb der Submit-Funktion tun. –

AngularJS benutzerdefiniertes Formular steuert die Überprüfung

Antwort

Verwandte Themen