表单验证 - 在角度JS不工作

Question

我有以下几点：

<form name="ctrl.form" class="form-horizontal" ng-class="{true: 'has-error'}[submitted && form.email.$invalid]" 
     novalidate> 

    <div class="form-group" ng-class="{'has-error' : ctrl.form.inputName.$dirty && ctrl.form.inputName.$invalid}"> 
     <label for="inputName" class="col-sm-2 control-label">Name</label> 
     <div class="col-sm-8"> 
      <input type="text" class="form-control" id="inputName" name="inputName" ng-model="ctrl.app.name" 
        placeholder="Enter stack name" ng-disabled="ctrl.editMode" ng-required='true' 
        ng-minlength='3' ng-maxlength='32' required/> 
     </div> 
     <span ng-show="ctrl.form.inputName.$error.required && !ctrl.form.inputName.$pristine" class="help-block">Name is required</span> 
     <span ng-show="ctrl.form.inputName.$error.minlength" class="help-block">Name is too short</span> 
     <span ng-show="ctrl.form.inputName.$error.maxlength" class="help-block">Name is too long</span> 
     <span ng-show="ctrl.form.inputName.$error.pattern" class="help-block">Name has invalid characters</span> 
    </div> 


    <div class="form-group" ng-class="{'has-error' : ctrl.hasServerErrors}"> 
     <div class="col-sm-offset-2 col-sm-10"> 
      <button type="submit" class="btn btn-primary" ng-disabled="ctrl.isCreating" 
        ng-click="ctrl.SubmitForm()">{{ctrl.editMode ? 'Update' : 
       ctrl.isCreating? 'Creating': 'Create'}} 
      </button> 
      <span ng-show="ctrl.hasServerErrors" class="help-block" 
        ng-repeat="serverError in ctrl.serverErrors"> 
      {{serverError}} 
     </span> 
     </div> 
    </div> 
    <div class="alert alert-success" ng-show="ctrl.showUpdateSuccessAlert"> 
     <strong>Successfully updated!</strong> 
    </div> 
</form> 

现在的问题是，即使我已经添加了required tag来命名的，还是当我点击提交按钮，呼叫进入没有显示该名称的后端服务是强制性的并且必须提供。

我在这里遗漏了什么？谢谢！

Answer 1

<div class="" ng-show="ctrl.form.inputName.$dirty && ctrl.form.inputName.$invalid"> 
Message which you want to print. 
</div> 

加入此项。

希望这会帮助你。

Answer 2

您应该在提交表单之前检查表单是否有效。

<button type="submit" class="btn btn-primary" ng-disabled="ctrl.form.$invalid" 
       ng-click="ctrl.SubmitForm()">{{ctrl.editMode ? 'Update' : 
      ctrl.isCreating? 'Creating': 'Create'}} 
     </button> 

$ invalid将无效，当表单无效时。