2016-05-14 1 views
1

内からの提出にメッセージをErrorに一度提出したが、今ここには、どのように私は必要なエラーメッセージを表示したい角度のjs

<div class="controls"> 
     <form name="formx" > 
     <ul class="form small"> 
       <div class="tag">ID</div> 
       <input type="text" class="small" name="enrolmentId" ng-model="enrolmentDetail.Id" required="" onkeypress='return !(event.charCode == 32)'> 
       <div class="error text-danger" style="position: absolute;margin-left: 120px;" ng-show="formx.enrolmentId.$error.required && (formx.$submitted || formx.enrolmentId.$touched)"><p>Id is required</p></div> 
      </li> 
      <li> 
       <div class="btn" ng-click="saveDetails(enrolmentDetail)" ng-show="formAction=='save'">SAVE</div> 
      </li> 
     </ul> 
      </form> 
    </div> 

以下のように私がしようとしているそれを行う方法がわからないされてから私たちがテキストボックスを汚すと、エラーメッセージが表示されますが、フォームが送信されてからエラーメッセージが表示されたい場合は、送信してはいけないとエラーメッセージが表示されます。

試してみましたが、

フィドルやポスティングを作成してくださいグラムの例では、それが

答えて

1

これはexample

HTML

<body ng-app="myApp"> 
<div ng-controller="myCtrl as mc"> 
<form class="form" name="myForm" ng-submit="mc.submit(myForm)" novalidate> 
    <div class="form-group"> 
    <label for="username">Username</label> 
    <input name="username" class="form-control" type="text" ng-model="mc.username" required/> 
    <p class="text-danger" ng-show="myForm.username.$error.required && mc.submitted">Username is required</p> 
    </div> 
    <div class="form-group"> 
    <label for="password">Password</label> 
    <input name="password" class="form-control" type="password" ng-model="mc.password" required/> 
    <p class="text-danger" ng-show="myForm.password.$error.required && mc.submitted">Password is required</p> 
    </div> 
    <button class="btn btn-success">submit</button> 
</form> 
<p class="text-success" ng-show="mc.sent && mc.submitted">Form sent</p> 

JS

angular.module("myApp",[]) 
    .controller("myCtrl", function(){ 
    var vm = this; 
    vm.submit = submit; 
    function submit(form){ 
     vm.submitted = true; 
     if(form.$valid && vm.submitted === true){ 
     //Send data logic 
     vm.sent = true; 
     } 
    } 
+1

で行うには、Iをありがとうrvin!これは魔法のように、素敵でシンプルに機能します!私はこの答えを受け入れることができると願っています! – Nat

関連する問題