表單輸入長度從下拉列表驗證

Question

選擇的項目我有以下形式，我試圖驗證以下表格狀態：

THEMENAME必須是必要的，應該有分鐘。 4個字符。 themeLang從選定的值不能相同themeLangTo（反之亦然）。

我想在每個無效字段下顯示跨度錯誤消息。

我試圖這樣做，但我無法解決它與選擇輸入。

有人可以告訴我如何以正確的方式做到這一點嗎？

表單代碼：

<ul class="nav nav-pills pull-right"> 
    <li><a href="" ng-click="showModalNewTheme()">Close form</a></li> 
</ul> 
<h3 class="text-muted">Add New Theme</h3> 

<form role="form" name="addThemeForm" id="addThemeForm" > 
    <div class="form-group"> 
     <label for="themeName">Theme name:</label> 
     <input id="themeName" type="name" required class="form-control" ng-minlength="4" ng-model="newtheme.name" placeholder="Enter Theme Name"> 
     <span class="formValidationError" ng-show="addThemeForm.themeName.$error">Enter valid e-mail</span> 
    </div> 


    <div class="form-group"> 
     <label for="themeLangFrom">Language from:</label> 
     <select id="themeLangFrom" required class="form-control" ng-options="language as language.name for language in languages" ng-model="newtheme.langFrom" > 
      <option value="">{{language.name}}</option> 
     </select> 
    </div> 


    <div class="form-group"> 
     <label for="themeLangTo">Language to:</label> 
     <select id="themeLangTo" required class="form-control" ng-options="language as language.name for language in languages" ng-model="newtheme.langTo" > 
      <option value="">{{language.name}}</option> 
     </select> 
    </div> 

    <input ng-click="addTheme(newtheme)" ng-disabled="!addThemeForm.$valid" type="submit" value="Add New Theme" class="btn btn-success btn-block btn-lg"> 
</form> 

Answer 1

爲了驗證themeLangFrom爲themeLangTo diferent你將需要實現自定義指令。

您可以使用角UI的ui-validate指令（http://angular-ui.github.io/ui-utils/）爲或proabbly更好：

推出自己的...你可以從密碼驗證指令那裏的許多實現採取例如剛剛注意到，不像密碼驗證你需要的字段不相等。

你可以在這裏看到一些例子：password-check directive in angularjs