Question

我有输入，我使用自定义指令来显示使用ng-messages的输入错误。我想使用属性来显示错误，而不是ng-message。

这是我的代码

    <md-input-container class="md-block" flex-gt-sm>
        <label>Enter Your Message</label>
     <input required md-no-asterisk ng-model="newEmployee.message" type="text" id="name" name="name" formValidate>
       <div ng-messages="Employeeform.message.$error">
    <div ng-message="messageValidator">Message is Invalid
   </div>

 </md-input-container>

指令：

    app.directive('formValidate', function() {
return {
    restrict: 'A',
    require: 'ngModel',
    template: '<p>Name is required</p>',
    link: function(scope, element, attr, ctrl) {
        function formValidate(ngModelValue) {
            if ([A - z].test(ngModelValue)) {
                ctrl.$setValidity('formValidate', false)
            } else {
                ctrl.$setValidity('formValidate', true),

            }
        return ngModelValue;
        }
        ctrl.$parsers.push(formValidate);
    }
};
});

Answer 1

利用角形。完成此文档https://docs.angularjs.org/guide/forms

没有ng-messages

<div class="form-group" ng-class="{ 'has-error': vm.form.firstname.$touched && vm.form.firstname.$invalid }">
    <label class="control-label col-xs-3" for="firstname">First Name</label>
    <div class="col-xs-9">
        <input class="form-control" name="firstname" id="firstname" ng-model="vm.firstname" type="text" ng-change = "vm.resetValidationErrors('firstname')" required/>
        <p ng-show="vm.form.firstname.$error.required && vm.form.firstname.$touched" class="help-block">First name is required.</p>
        <p ng-show="vm.form.firstname.$error.firstname && vm.form.firstname.$touched" class="help-block">{{ vm.form.firstname.errorMessage }}</p>
    </div>
</div>

使用自定义指令显示输入错误而不使用NgMessages

1 个答案: