2016-12-21 38 views
1

執行驗證我有一個表格如下圖所示:如何Angular.js

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <h4 class="nomargin">Let us know your concern or question and we will try to respond within 24 hours.</h4> 
</div> 
<div class="modal-body paddingmodal2"> 
    <form id="support-form" name="supportForm" class="nobottommargin" novalidate=""> 
     <div class="col_full"> 
      <label for="login-form-username">Description <small>*</small></label> 
      <textarea rows="4" cols="50" type="text" ng-class="{'error': submitted && supportForm.description.$error.required}" id="login-form-username" name="username" class="sm-form-control" ng-model = 'support.description' required/> 
     </div> 
     <div class="alert" role="alert" ng-class="{'alert-danger':!isLoginSuccess, 'alert-success':isLoginSuccess}" ng-show="isShowLoginAlert" ng-bind="loginSubmitStatusMsg"></div> 
     <div class="col_full nobottommargin no-margin-col-full"> 
      <button type="submit" class="button button-3d button-black nomargin col_full" id="login-form-submit" name="submit-bt" ng-click="saveSupportData(supportForm,support)" ng-disabled="isDisableLoginBtn">Submit</button> 
     </div> 

    </form> 
</div> 

的JavaScript:

$scope.saveSupportData = function(supportForm,data){ 
       if(supportForm.$invalid){ 
        return; 
       } 
} 

當我點擊按鈕上的文本區域邊界應強調的,但它不是發生。

任何人都可以提供幫助。

回答

3

表單是FormController的一個實例。表單實例可以使用name屬性可選地發佈到作用域中。

類似地,具有ngModel指令的輸入控件包含NgModelController的 實例。這樣一個控件實例可以是 ,通過在輸入控件上使用名稱屬性 作爲表單實例的屬性發布。 name屬性指定表單實例上的 屬性的名稱。

這意味着窗體和控件 的內部狀態可用於在視圖中使用標準綁定 原語進行綁定。

這允許我們上述例子中使用這些功能擴展:用戶用 控制相互作用之後顯示

定製錯誤消息(即,當$觸摸設置)定製錯誤消息顯示 在提交表單( $提交設置),即使用戶沒有 與控制

互動應該是

ng-class="{'error': submitted && supportForm.username.$error.required}" 

因爲您的字段名稱是用戶名。 提交的應該是真實的,當表單發佈 試試這個

$scope.saveSupportData = function(supportForm,data){ 
    $scope.submitted=true; 
    if(supportForm.$invalid){ 
     return; 
    } 
} 
+0

喜Ghazanfar它不工作。 – MMR

+0

您也可以使用$ invalid爲必填字段 ng-class =「{'error':submitted && supportForm.description。$ invalid}」 –

+0

仍然沒有出現 – MMR