Почему не появляется мое сообщение ng?
КОД:
view.html
<form name="vm.form.articleForm" class="form-horizontal" ng-submit="vm.save(vm.form.articleForm.$valid)" novalidate>
<fieldset>
<div class="form-group" show-errors>
<label class="control-label" for="title">Title</label>
<input name="title" type="text" ng-model="vm.article.title" id="title" class="form-control" placeholder="Title" required autofocus>
<div ng-messages="vm.form.articleForm.title.$error" role="alert">
<p class="help-block error-text" ng-message="required">Article title is required.</p>
</div>
</div>
<div class="form-group">
<label class="control-label" for="content">Content</label>
<textarea name="content" data-ng-model="vm.article.content" id="content" class="form-control" cols="30" rows="10" placeholder="Min: 1400 characters. Max: 14000 characters." required ng-maxlength="14000" highlight-on-error></textarea>
<!--counter-->
<br>
<span class="form-help">{{vm.article.content.length}} Characters</span>
<div ng-messages="vm.form.articleForm.content.$error" role="alert">
<p class="help-block error-text" ng-message="required">min: 1400 characters max: 14000</p>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">{{vm.article._id ? 'Update' : 'Create'}}</button>
</div>
</fieldset>
</form>
контроллер
(function () {
'use strict';
angular
.module('articles')
.controller('ArticlesCreateController', ArticlesCreateController);
ArticlesCreateController.$inject = ['$scope', '$state', '$window', 'articleResolve', 'Authentication', 'Notification'];
function ArticlesCreateController($scope, $state, $window, article, Authentication, Notification) {
var vm = this;
vm.article = article;
vm.authentication = Authentication;
vm.form = {};
vm.remove = remove;
vm.save = save;
// Remove existing Article
function remove() {
if ($window.confirm('Are you sure you want to delete?')) {
vm.article.$remove(function() {
$state.go('articles.list');
Notification.success({ message: '<i class="glyphicon glyphicon-ok"></i> Article deleted successfully!' });
});
}
}
// Save Article
function save(isValid) {
if (!isValid) {
$scope.$broadcast('show-errors-check-validity', 'vm.form.articleForm');
return false;
}
// Create a new article, or update the current instance
vm.article.createOrUpdate()
.then(successCallback)
.catch(errorCallback);
function successCallback(res) {
$state.go('articles.list'); // should we send the User to the list or the updated Article's view?
Notification.success({ message: '<i class="glyphicon glyphicon-ok"></i> Article saved successfully!' });
}
function errorCallback(res) {
Notification.error({ message: res.data.message, title: '<i class="glyphicon glyphicon-remove"></i> Article save error!' });
}
}
}
}());
СИТУАЦИЯ:
Когда я нажимаю отправить с пустым textarea
сообщение об ошибке "min: 1400 символов max: 14000 символов" не появляется.
В настоящее время использую mean.js и настраиваю его для изучения стека MEAN.
КАК ВОСПРОИЗВОДИТЬ:
Загрузите mean.js: https://github.com/meanjs/mean
Файл выглядит следующим образом: modules / article /client/views/admin/form-article.client.view.html
1 ответ
Вам необходимо добавить тип сообщения для проверки максимальной длины.
В настоящее время сообщение будет отображаться только в том случае, если у вас нет текста из-за необходимого флага, но как только вы наберете максимальную длину, вы не увидите сообщение.
<div ng-messages="vm.form.articleForm.content.$error" role="alert">
<p class="help-block error-text" ng-message="required">min: 1400 characters max: 14000</p>
</div>
Добавьте следующее для сообщения.
<div ng-messages="vm.form.articleForm.content.$error" role="alert">
<p class="help-block error-text" ng-message="required">min: 1400 characters max: 14000</p>
<p class="help-block error-text" ng-message="maxlength">min: 1400 characters max: 14000</p>
</div>
Ваше сообщение об ошибке также сбивает с толку, так как вы не указали минимальную длину, но указали сообщение об ошибке минимальной длины.
Если у вас все еще есть проблемы, попробуйте изменить его с ng-maxlength="14000"
чтобы просто maxlength="14000"
а также убедитесь, что ngMessages правильно введены в ваше приложение.