Angular: Form validation and custom directive

Question

I have two inputs and I need to validate each fields with the following restriction: The Value B must always be minor than Value A otherwise show an error message. This is the example.

I know I need to create a directive but I don't know even how to start.

HTML

<form name="exampleForm">
    <label>Value A</label>
    <input type="number" name="valueA" data-ng-model="valueA" required="required"/>
    <div ng-messages="exampleForm.valueA.$error">
        <div ng-message="required">This field is required</div>
    </div>
    <p>
    <label>Value B</label>
    <input type="number" name="valueB" data-ng-model="valueB" required="required"/>
    <div ng-messages="exampleForm.valueB.$error">
        <div ng-message="required">This field is required</div>
    </div>
</form>

[Have a look at the docs](https://docs.angularjs.org/guide/forms#custom-validation), there's an example of custom validation which will get you on tracks. — Maen, Dec 29 '16 at 22:40

score 0 · Accepted Answer · answered Dec 29 '16 at 22:43

<input type="number" name="valueB" data-ng-model="valueB" max="{{ valueA - 1 }}" required="required"/>
  <div ng-messages="exampleForm.valueB.$error">
    <div ng-message="required">This field is required</div>
    <div ng-message="max">This field is too large</div>
  </div>

Angular: Form validation and custom directive

1 Answers1