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? — Daniele Sassoli
– Daniele Sassoli, Commented Oct 7, 2015 at 13:23

Mathew Berg · Accepted Answer · 2015-10-07 13:24:20Z

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 7, 2015 at 13:24

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniele Sassoli Over a year ago

can't you just do ng-require="elem.value" ? shouldn't it work the same?

Mathew Berg Over a year ago

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

Adrien Blaizot Over a year ago

Thanks to you're help, both of you. ng-require="elem.value" work perfectly fine. ng-required="elem.value !== ''" block every time.

Mathew Berg Over a year ago

For the !== '', you just have to pre-set it to '' in the controller.

Collectives™ on Stack Overflow

ng-required, how to use it between input?

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related