, отображающий сообщения об ошибках ниже формы ввода

Question

Я хотел бы знать, как я могу отобразить сообщение об ошибке ниже поля ввода, используя угловые js. Если поле пустое, я хочу отобразить «Это поле обязательно». Также, как проверить, начинается ли имя поля с буквенно-цифровыми значениями, например (\? /% *: | "<.>), Мне нужно отобразить ошибку« Имя поля не должно начинаться с буквенно-цифровых значений »ниже этого поля ввода. // код здесь идет

<div ng-controller="ModalController"> 

        <form novalidate name="inputForm" class="form-horizontal"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <cp-input name="username" ng-model="user.name" 
          label="{{'formlabels.reponame' | translate}}" required="true" 
          error-state="right"> 
         </cp-input> 
        </div> 
       </div> 
       <div style="color:red" ng-show="inputForm.username.$error.required">First name is required</div><br> 
       </form> 
       <!-- <a href="javascript:void(0)" ng-click="findUsers()"> Show Confirm </a> --> 
       <button type="button" class="btn btn-primary" data-dismiss="modal" 
        data-ng-click="submitData()">Add</button> 
      </div> 

Answer 1

было бы хорошая идея использовать ngMessages директиву и ngPattern - посмотри на ссылке дока с примером

<form name="myForm"> 
    <label> 
    Enter your name: 
    <input type="text" 
     name="myName" 
     ng-model="name" 
     ng-minlength="5" 
     ng-maxlength="20" 
     ng-pattern="^[^\w+$]" 
     required /> 
    </label> 
    <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre> 

    <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
</div> 
</form> 

ref https://docs.angularjs.org/api/ngMessages/directive/ngMessages

Answer 2

нг-сообщения помогут you..Try это

<input ng-model="typeText" id="Sample" name="Sample" type="text" ng-pattern="^$|^[A-Za-z0-9]+" required/> 
or ng-pattern="/^[a-zA-Z\s]*$/" 
     <div ng-messages="formname.Sample.$error"> 
      <div ng-message="pattern">only characters are allowed</div> 
      <div ng-message="required">field required</div> 
     </div>