How do I access dynamically created fields in angularjs?

Question

When the text entered by the user in a text field passes the validation, I want to generate a new textbox. Now when the text of the new textbox is valid, another textbox should be generated.

The problem is I am not able to do it, because the names of the that get created are of the type 'email1' 'email2' 'email3'. And I'm not able to access these dynamically generated fields.

JS Snippet:

var master = {
    name: 'John Smith',
    address: {
        line1: '123 Main St.',
        city: 'Anytown',
        state: 'AA',
        zip: '12345'
    },
    contacts: [{
        type: 'phone',
        value: 'This is a value',
        validationtype: 'number'
    }]
};

$scope.addContact = function(contact) {
    var valueOfContact = $scope.form.contacts.value;
    console.log(valueOfContact);
    if ($scope.myForm.email.$valid == true) {
        tbCounter++;
        $scope.form.contacts.push({
            type: 'email',
            value: '',
            name: 'email' + tbCounter,
            id: 'email' + tbCounter
        });
        console.log($scope.form.contacts.indexOf(contact), $scope.form.contacts.length);
    }
};

In the If clause I want to be able to access email1, email2 and so on.

HTML Snippet:

<div ng-repeat="contact in form.contacts">
  <label>{{ contact.type }}</label>
  <input name ="{{ contact.name }}" type="{{ contact.type }}" ng-model="contact.value" ng-change=addContact(contact) required/>
  <span class="error" ng-show="myForm.email.$error.required">required</span>
  <span class="error" ng-show="myForm.email.$error.email">invalid email</span>
</div>

Thanks.

can you provide working fiddler ?

Konstantin Krass
– Konstantin Krass

2014-01-29 16:05:03 +00:00
Commented Jan 29, 2014 at 16:05 — Konstantin Krass
– Konstantin Krass, Commented Jan 29, 2014 at 16:05

ms87 · Accepted Answer · 2014-01-29 17:58:57Z

3

Try accessing each of those elements by $index inside your ng-repeat:

<div ng-repeat="contact in form.contacts">

      <label>{{ form.contacts[$index].type }}</label>
      <input name="form.contacts[$index].name" type="form.contacts[$index].type" ng-model="form.contacts[$index].value" ng-change="addContact(contact)" required />

</div>

Have a look at this plunk, you'll get the idea.

edited Jan 29, 2014 at 17:58

answered Jan 29, 2014 at 17:50

ms87

17.5k23 gold badges89 silver badges123 bronze badges

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

4 Comments

Vivek Todi Over a year ago

I am able to generate the text boxes too. But I need to check whether each of them is valid or not when I submit my form.

ms87 Over a year ago

so whats the problem? just check formName.$valid, or bind your submit button's ng-disabled to the formName.$invalid property of your form, or why not just check the items inside form.contacts to see if any are empty inside your controller?

ms87 Over a year ago

Check out this fork, watch the console for the form errors:.

Vivek Todi Over a year ago

I could use form.contacts to see if any are empty inside my controller. But then I want to be able to validate the text as email addresses, etc. And if you take a look at the HTML I have used ng-show to display error messages if the validations fail.

Collectives™ on Stack Overflow

How do I access dynamically created fields in angularjs?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related