Visualizza errore personalizzato ngMessage

In this plunk l'obiettivo è visualizzare un messaggio di errore in base a una convalida nel controller (invece dei built-in required o min-length). L'errore del messaggio non viene visualizzato quando è impostato il messaggio ng-message-exp. Qualche idea su come farlo funzionare?Visualizza errore personalizzato 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'); 
    } 
    }; 


});

fonte

2016-02-15 ps0604

Sembra che tu stia overcomplicating cose. Perché preoccuparsi di estrarre l'elemento del modulo '$ modelValue'? Perché non controllare semplicemente 'ng-model' the' $ scope.data.field1'? – ryanyuyu

anche se lo faccio, il messaggio di errore non viene visualizzato – ps0604

vostro principale ng-messages argomento è legato a myForm.field1.$error, ma non avete mai effettivamente aggiungere un errore al form.field1.$error. Così nel controller, è sufficiente impostare $error oggetto stesso:

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

Poi, si può solo avere la direttiva ng-message fare il suo lavoro. Gli elementi secondari che forniscono ng-message vengono valutati come proprietà del genitore ng-messages già (notare l'extra s). In genere, questo viene utilizzato con il genitore come oggetto $error dell'elemento modulo e i child interni sono le proprietà come $error.required o nel tuo caso $error.validationError. Non c'è bisogno di ng-message-exp qui:

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

Fixed plunker

fonte

2016-02-15 05:12:01 ryanyuyu

Il modo più corretto per fare questo controller è quella di utilizzare $ setValidity

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

form.$setSubmitted();

fonte

2016-10-04 09:40:40

Dovresti davvero aggiungere qualche spiegazione sul motivo per cui dovrebbe funzionare - puoi anche aggiungere codice e commenti nel codice stesso - nella sua forma attuale, lo fa non fornire alcuna spiegazione che possa aiutare il resto della comunità a capire cosa hai fatto per risolvere/rispondere alla domanda. Questo è particolarmente importante per una domanda più vecchia e per le domande che hanno già delle risposte. – ishmaelMakitla

Questo ha funzionato per me, e il ryanyuyu no. –

e come appare la vista ???? non capisco – wiwit

risposta di La Dmitry K è eccellente.

Ho intenzione di espandere la risposta.

//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); 
    } 

}

E il codice HTML relativo:

<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>

fonte

2017-04-04 15:46:59

Visualizza errore personalizzato ngMessage

risposta

Problemi correlati