CODEWITHSUNDEEP
javascripthtmlangularjsforms
marked-down
marked-down

Reputation: 10408

Check a form is valid from outside the form in another part of the DOM with Angular?

I have a peculiar setup where I need to dynamically display whether a form is valid from outside the form's scope in another part of the DOM. Specifically, my markup is like this:

<section class="overview">
  <div ng-repeat="file in files">{{ file.name }}</div>
</section>

<section class="forms">
  <form ng-repeat="file in files" name="'fileForm' + $index">
    <!-- form stuff ->
  </form>
</section>

<button>Submit All</button>

For each fileForm, in the .overview section, I want to apply an ng-class if the corresponding form is valid. Something like this:

<div ng-repeat="file in files" ng-class="{ valid: 'fileForm' + $index.$valid }>{{ file.name }}</div>

Is there any way to achieve this using Angular's native form tools?

Upvotes: 0

Views: 131

Answers (1)

milanlempera
milanlempera

Reputation: 2263

Yes, form state object is inserted to your scope/controller in proprety derived from form name. 

<section class="overview">
  <div ng-repeat="file in example.files">
    <div ng-class="{'file-invalid': example.fileForms[$index].$invalid}">
      File item "{{ file.name }}" is valid: {{example.fileForms[$index].$valid}}</div>
    </div>
</section>

<section class="forms">
  <form ng-repeat="file in example.files" 
  name="{{'example.fileForms.' + $index}}">

    <input ng-model="file.name" required>

  </form>
</section>

Simple example is here http://plnkr.co/edit/7LMLDi?p=preview

For comfortable work is better use ng-form for inner forms and form element for outer. Outer form is automatically invalid, if one of inner forms is not valid. Example is here http://plnkr.co/edit/9m94AuNMR8J077Cakvgb

Upvotes: 1

Related Questions