current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 0 down vote favorite

I use AngularJS 1.5, and I want to use ng-repeat to build a form.

Now, I have in my code :

<div class="form-group" ng-class="{'has-error': Form.field1.$dirty && Form.field1.$invalid}">
     <label class="control-label"> Label 1 required <span class="symbol required"></span> </label>
     <input type="text" class="form-control" ng-model="model.field1" ng-required="currentStep == 2" ng-blur="function1()">
     <span class="error" ng-if="Form.field1.$dirty && Form.field1.$error.required">Field required !</span>
</div>
<div class="form-group">
     <label class="control-label"> Label 2 not required </label>
     <input type="text" class="form-control" ng-model="model.field2">
 </div>
 ....

I want to use an array to buid my form like that :

$scope.myForm= [{
    'type': 'text',
    'name': 'field1',
    'required': true,
    'label': 'My field 1',
    'ng': [{'ng-blur': 'function1'}]
}, {
    'type': 'text',
    'name': 'field2',
    'required': false,
    'label': 'My field 2',
}];

So I tried something like that :

<div ng-repeat="field in myForm" class="form-group {field.name}}" ng-class="{'has-error': Form.{{ field.name }}.$dirty && Form.{{ field.name }}.$invalid}">
    <label class="control-label">{{ field.label }}</label>
    <input type="text" class="form-control" name="{{ field.name }}" ng-model="adherent.{{ field.name }}" ng-required="currentStep == 2">
    <span ng-if="{{ field.required }}" class="error text-small block" ng-if="Form.numeroSecuriteSociale.$dirty && Form.numeroSecuriteSociale.$error.required">Field required !</span>
</div>

But of course I got a syntax error... Do I have to create a directive ? or to use ng-init ?

share|improve this question
    
I did this once before on a large form and it was really difficult to maintain the code once the fields started to interact with each other. Initially I thought it would be cleaner to have the fields come from an Array, but looking back don't think the added complexity was worth the small reduction in html. – Mike R 1 hour ago
up vote 1 down vote accepted

Do not use ngInit!!! It has two very specific uses and really shouldn't be used for anything else: have a look.

You actually have some syntax errors:

Missing second opening curly brace:

class="form-group {field.name}}"

Also, I'm pretty sure this is not going to work:

ng-class="{'has-error': Form.{{ field.name }}.$dirty ...

ngClass is not setup to do interpolation in the way you are trying to use it. You are basically writing this:

ng-class="{'has-error': Form."exampleFieldName".$dirty

And that is never going to work.

You are better off writing a directive or a component and using ng-repeat with that. Using this approach makes way more sense and is much easier to implement. Ultimately you want something like this:

$scope.myForm= [{
  'type': 'text',
  'name': 'field1',
  'required': true,
  'label': 'My field 1',
  'ng': [{'ng-blur': 'function1'}],
  model: {}
}, {
  'type': 'text',
  'name': 'field2',
  'required': false,
  'label': 'My field 2',
  model: {}
}];

<my-form-field field="field" ng-model="field.model" ng-repeat="field in myForm"></my-form-field>

See how easy that is to write and read? About actually writing the directive/component... that could prove to be quite a challenge. I'm sure if you do some Google-ing you will find someone that has written a blog on this exact subject.

share|improve this answer
    
Yes you're right. I will take a look to directive and try to understand how it works. Thanks for your time. – Vincent Decaux 49 mins ago
up vote 1 down vote

You could use a different object-syntax for your ng-model. This should do the job:

ng-model="adherent[field.name]"
share|improve this answer
    
Yes you are right, nice idea for the model name. – Vincent Decaux 1 hour ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.