Отображение пользовательской ошибки ngMessage

In this plunk Цель состоит в том, чтобы показать сообщение об ошибке на основе проверки в контроллере (вместо встроенных модулей required или min-length). Ошибка сообщения не отображается, когда установлен ng-message-exp. Любые идеи, как сделать эту работу?Отображение пользовательской ошибки 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'); 
    } 
    }; 


});

источник

2016-02-15 ps0604

Похоже, вы усложнять вещи. Зачем беспокоиться о том, чтобы вырвать элемент '$ modelValue элемента формы? Почему бы просто не проверить 'ng-model'' $ scope.data.field1'? – ryanyuyu

, даже если я это сделаю, сообщение об ошибке не отображается – ps0604

Ваш главный аргумент ng-messages привязан к myForm.field1.$error, но вы никогда не добавить ошибку в form.field1.$error. Таким образом, в вашем контроллере, просто установите $error сам объект:

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

Затем, вы можете просто написать ng-message директивы делать свою работу. Детальные элементы, которые предоставляют ng-message, оцениваются как свойства их родителя ng-messages (обратите внимание на дополнительные s). Как правило, это используется с родителем, являющимся объектом элемента формы $error, а внутренними детьми являются такие свойства, как $error.required или в вашем случае $error.validationError. Нет необходимости ng-message-exp здесь:

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

Fixed plunker

источник

2016-02-15 05:12:01 ryanyuyu

Более правильный способ сделать это в контроллере не использовать $ setValidity

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

form.$setSubmitted();

источник

2016-10-04 09:40:40

Вы должны действительно добавить объяснение, почему это должно сработать - вы также можете добавить код, а также комментарии в самом коде - в его текущей форме не дают никаких объяснений, которые могут помочь остальной части сообщества понять, что вы сделали, чтобы решить/ответить на вопрос. Это особенно важно для более старого вопроса и вопросов, на которые уже есть ответы. – ishmaelMakitla

Это сработало для меня, а ряюю нет. –

и как выглядит вид ???? я не могу понять – wiwit

ответ Дмитрия Д.К. это отлично.

Я собираюсь расширить ответ.

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

}

И соответствующий HTML-код:

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

источник

2017-04-04 15:46:59

Отображение пользовательской ошибки ngMessage

ответ

Смежные вопросы