フォームの検証は、私は以下のいる

Question

角度jsファイルで作業していない：

は

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

$が無効な場合は、フォームが有効ではありません。