Geek Answers Handbook

Angular form validation

If this is a regular (the name attribute is requested by the server) form with angular and cannot figure out how to make validations work. What should I add in ng-show = "TODO"

http://jsfiddle.net/Xk3VB/7/

<div ng-app>
  <form ng-init="variants = [{duration:10, price:100}, {duration:30, price:200}]">
    <div ng-repeat="variant in variants" ng-form="variant_form">
      <div>
        <label>Duration:</label>
        <input name="variants[{{$index}}][duration]" ng-model="variant.duration" required />
        <span ng-show="TODO">Duration required</span>
      </div>
      <div>
        <label>Price:</label>
        <input name="variants[{{$index}}][price]" ng-model="variant.price" />
        <span ng-show="TODO">Price required</span>
      </div>
    </div>
  </form>
</div>

ps: it's just a piece of form that is harder

thanks

+4
source share
1 answer

AngularJS relies on input names to detect validation errors.

Unfortunately, today it is impossible (without using the user directive) to dynamically generate an input name. Indeed, checking the input documents, we can see that the name attribute accepts only a string.

, ng-form . - :

<div ng-repeat="variant in variants" >
  <ng-form name="innerForm">
     <div>
        <label>Duration:</label>
        <input name="duration" ng-model="variant.duration" required />
        <span ng-show="innerForm.duration.$error.required">Duration required</span>
    </div>
    <div>
        <label>Price:</label>
        <input name="price" ng-model="variant.price" required/>
        <span  ng-show="innerForm.price.$error.required">Price required</span>
    </div>
  </ng-form>

UPDATE: , - :

<input type="hidden" name="variants[{{$index}}][duration]" ng-model="variant.duration"/>
<input name="duration" ng-model="variant.duration" required />

, , ( ). , .

PS: , . ng-submit

+11

More articles:


All Articles