ng-required, how to use it between input?

Question

I created a form with two input repeated for X elements. Each element is required only if we put something in the other one:

My.HTML

<form ng-submit="validate();">
 <div ng-reapet="elem in Myelements">
  <label>{{elem.name}}</label>
  <div>
    New Value : <input name="value" ng-required="reason.$valid" ng-model="elem.value" />
  </div>
  <div>
    Why : <textarea name="reason" ng-required="value.$valid" ng-model="elem.reason"/>
  </div>
 </div>  
 <input type="submit" value="Submit" />
</form>

This not working as expected. How do I make this work properly ?

EDIT The right solution for me (the accepted answer helped me)

<form ng-submit="validate();">
    <div ng-reapet="elem in Myelements">
        <label>{{elem.name}}</label>
        <div>
            New Value : <input name="value" ng-required="elem.reason" ng-model="elem.value" />
        </div>
        <div>
            Why : <textarea name="reason" ng-required="elem.value" ng-model="elem.reason"/>
        </div>
    </div>  
    <input type="submit" value="Submit" />
</form>

Possible duplicate of [How can I conditionally require form inputs with AngularJS?](http://stackoverflow.com/questions/13466133/how-can-i-conditionally-require-form-inputs-with-angularjs) — Daniele Sassoli, Oct 07 '15 at 13:23

score 1 · Accepted Answer · answered Oct 07 '15 at 13:24

1

Just pivot off the other inputs value

<form ng-submit="validate();">
    <div ng-reapet="elem in Myelements">
        <label>{{elem.name}}</label>
        <div>
            New Value : <input name="value" ng-required="elem.reason !== ''" ng-model="elem.value" />
        </div>
        <div>
            Why : <textarea name="reason" ng-required="elem.value !== ''" ng-model="elem.reason"/>
        </div>
    </div>  
    <input type="submit" value="Submit" />
</form>

answered Oct 07 '15 at 13:24

Mathew Berg

28,625
11
69
90

1

can't you just do ng-require="elem.value" ? shouldn't it work the same? – Daniele Sassoli Oct 07 '15 at 13:26
2

Depends on how they're set, if either of them are set to number 0 via the controller then that won't work. I like to be explicit. `console.log(0 ? true : false) === false` – Mathew Berg Oct 07 '15 at 13:27
Thanks to you're help, both of you. `ng-require="elem.value"` work perfectly fine. `ng-required="elem.value !== ''"` block every time. – Adrien Blaizot Oct 07 '15 at 13:53
1

For the `!== ''`, you just have to pre-set it to `''` in the controller. – Mathew Berg Oct 07 '15 at 13:55

ng-required, how to use it between input?

1 Answers1