0

I have following form and I'm trying to validate following form states:

themeName must is required and should have min. 4 chars. themeLangFrom selected value cannot be same as themeLangTo (and vice versa).

I would like to display span error message under each invalidated field.

I tried to do by this way but I cannot resolve it with select inputs.

Could somebody tell to me how to do it in the right way please?

Form code:

<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>
Niklas
  • 13,005
  • 23
  • 79
  • 119
redrom
  • 11,502
  • 31
  • 157
  • 264

1 Answers1

0

In order to validate that themeLangFrom is diferent from themeLangTo you will need to implement a custom directive.

You can use angular-ui's ui-validate directive (http://angular-ui.github.io/ui-utils/) for that or proabbly better:

Roll your own... You can take example from the many implementations for password validation directives out there just notice that unlike password validation you need the fields to not be equal.

You can see some examples here: password-check directive in angularjs

Community
  • 1
  • 1
Variant
  • 17,279
  • 4
  • 40
  • 65