NgMessagesを使用せずにカスタムディレクティブを使用して入力エラーを表示する

Question

私は入力があり、ng-messagesを使用して入力エラーを表示するカスタムディレクティブを使用します。そして、メッセージを表示するのではなく、エラーを表示するために属性を使用したいと思います。ここで

は私のコード

<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

角度-フォームをご利用ください。 NG-のメッセージがなければこのdoc https://docs.angularjs.org/guide/forms

て行く

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