Angezeigter Fehler ngMessage

In this plunk Ziel ist es, eine Fehlermeldung basierend auf einer Validierung im Controller zu zeigen (anstelle der integrierten required oder min-length). Der Nachrichtenfehler wird nicht angezeigt, wenn die ng-message-exp festgelegt ist. Irgendwelche Ideen, wie das funktioniert?Angezeigter Fehler ngMessage

HTML

<body ng-app="ngMessagesExample" ng-controller="ctl"> 

    <form name="myForm" novalidate ng-submit="submitForm(myForm)"> 
    <label> 
     This field is only valid when 'aaa' is entered 
     <input type="text" 
      ng-model="data.field1" 
      name="field1" /> 
    </label> 
    <div ng-messages="myForm.field1.$error" style="color:red"> 
     <div ng-message-exp="validationError">this is the error</div> 
    </div> 

    <br/><br/> 
    <button style="float:left" type="submit">Submit</button> 
</form>

Javascript

var app = angular.module('ngMessagesExample', ['ngMessages']); 

app.controller('ctl', function ($scope) { 

    $scope.submitForm = function(form) { 

    if (form.field1.$modelValue != 'aaa') { 
     $scope.validationError = true; 
     console.log('show error'); 
    } 
    else { 
     $scope.validationError = false; 
     console.log('don\'t show error'); 
    } 
    }; 


});

Quelle

2016-02-15 ps0604

Es sieht aus wie Sie die Dinge overcomplicating sind. Warum sollten Sie sich damit beschäftigen, das '$ modelValue' des Formularelements auszulöschen? Warum sollte man nicht einfach das 'ng-Modell' '$ scope.data.field1' überprüfen? – ryanyuyu

auch wenn ich das tue, wird die Fehlermeldung nicht angezeigt – ps0604

Ihr Haupt ng-messages Argument myForm.field1.$error gebunden ist, aber man kann nie wirklich einen Fehler an den form.field1.$error hinzuzufügen. Also in Ihrem Controller, setzen nur $error Objekt selbst:

if ($scope.data.field1 != 'aaa') { 
    form.field1.$error.validationError = true; 
} 
else { 
    form.field1.$error.validationError = false; 
}

Dann können Sie nur noch die ng-message Richtlinie seine Arbeit tun. Die untergeordneten Elemente, die ng-message bereitstellen, werden bereits als Eigenschaften ihres übergeordneten Elements ng-messages ausgewertet (beachten Sie die zusätzlichen s). In der Regel wird dies verwendet, wobei das übergeordnete Objekt das $error Objekt des Formularelements ist und die inneren untergeordneten Objekte die Eigenschaften $error.required oder in Ihrem Fall $error.validationError sind. Keine Notwendigkeit für ng-message-exp hier:

<div ng-messages="myForm.field1.$error" style="color:red"> 
    <div ng-message="validationError">this is the error</div> 
</div>

Fixed plunker

Quelle

2016-02-15 05:12:01 ryanyuyu

Je mehr richtige Weg, dies in der Steuerung zu tun ist, es ist eine ausgezeichnete $ setValidity

if(a !== b){ 
    form.inputName.$setValidity('custom-err', false); 
} else { 
    form.inputName.$setValidity('custom-err', true); 
} 

form.$setSubmitted();

Quelle

2016-10-04 09:40:40

Sie sollten wirklich einige Erklärung hinzufügen, warum dies funktionieren sollte - Sie können auch Code sowie die Kommentare im Code selbst hinzufügen - in seiner aktuellen Form tut es keine Erklärung, die dem Rest der Gemeinschaft helfen kann, zu verstehen, was Sie getan haben, um die Frage zu lösen/zu beantworten. Dies ist besonders wichtig für eine ältere Frage und die Fragen, die bereits Antworten haben. – ishmaelMakitla

Dies funktionierte für mich, und Ryanyuyu hat nicht. –

und wie sieht die Ansicht aus? Ich kann nicht verstehen – wiwit

Die Dmitry K Antwort zu verwenden.

Ich werde die Antwort erweitern.

//Function before show your form: 
vm.showForm(form){ 
     form.$setPristine(); 
     form.$setUntouched(); 
     form.myFieldName.$setValidity('myCustomValidationName', false); 

     //More code... 
} 

//funtion to validate field on "ng-change" 
vm.validateField(form){ 

    if(xxxx == yyy) //Make your own validation{ 
     form.myFieldName.$setValidity('myCustomValidationName', true); 
    }else{ 
     form.myFieldName.$setValidity('myCustomValidationName', false); 
    } 

}

Und die entsprechenden HTML-Code:

<form name="myFormName" novalidate> 
    <md-input-container class="md-block"> 
     <label>myField</label> 
     <input ng-model="ctrl.myFieldName" name="myFieldName" ng-change="ctrl.validateField(myFormName)" /> 

     <div ng-show="myFormName.myFieldName.$touched || myFormName.$submitted"> 
      <div ng-messages="myFormName.myFieldName.$error"> 
       <div ng-message="myCustomValidationName">this is the message to show</div> 
      </div> 
     </div> 
    </md-input-container> 
</form>

Quelle

2017-04-04 15:46:59

Angezeigter Fehler ngMessage

Antwort

Verwandte Themen