2

I'm creating a dynamic form that uses Angular validations. When the form loads, it loads a list of contacts (first/last name and email address fields) along with a list of groups. Only the email field is required. I want to disable my submit button is the form is pristine or if any of the validations have failed. I have a dozen other forms like this one that all work, but for some reason, ng-disabled is not working on this form. The button isn't disabled when the form first loads, or even if I invalidate some entries.

Here is my dynamic form:

<form accept-charset="UTF-8" name="newContactsForm" ng-submit="update(newContacts)" novalidate>
    <input name="utf8" type="hidden" value="✓">
    <input name="authenticity_token" type="hidden" ng-model="newContacts.token" ng-init="newContacts.token='<%= form_authenticity_token %>'">

    <div class="form-group multiple-photo-upload">
        <input class="btn btn-primary pull-right" style="margin-right:5px;" name="commit" type="submit" value="Update Contacts" ng-disabled="$newContactsForm.$pristine">
        <div class="btn btn-default pull-right" style="margin-right:5px;" ng-click="addGroup()">Add Group</div>
        <div class="btn btn-default pull-right" style="margin-right:5px;" ng-click="addContact()">Add Contact</div>
    </div>

    <table class="table table-bordered table-hover contacts-table">
        <thead>
            <tr>
                <th class="text-center col-button">
                    <div class="btn btn-danger btn-sm one-em" ng-show="false"><i class="fa fa-trash"></i></div>
                </th>
                <th class="text-center col-field">First Name</th>
                <th class="text-center col-field">Last Name</th>
                <th class="text-center col-field">Email</th>
                <th class="col-field" ng-repeat="g in groupsArray" class="text-center col-field" id="{{'group-' + $index}}">
                    <div class="input-group">
                        <span class="input-group-btn" style="width:initial;">
                            <div class="btn btn-danger btn-sm one-em" ng-if="g.id" ng-click="deleteGroup(g.id)"><i class="fa fa-trash"></i></div>
                            <div class="btn btn-danger btn-sm one-em" ng-if="!g.id" ng-click="removeGroup($index)"><i class="fa fa-times"></i></div>
                        </span>
                        <input type="text" ng-init="newContacts.groups[$index].name = g.name || null" ng-model="newContacts.groups[$index].name" class="form-control" required>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody id="contacts">
            <tr ng-repeat="c in contactsArray" id="{{'contact-' + $index}}">
                <input name="id" type="hidden" ng-init="newContacts.contacts[$index].id = c.id" ng-model="newContacts.contacts[$index].id">
                <td class="col-button">
                    <div class="btn btn-danger btn-sm one-em" ng-if="c.id" ng-click="deleteContact(c.id)"><i class="fa fa-trash"></i></div>
                    <div class="btn btn-danger btn-sm one-em" ng-if="!c.id" ng-click="removeContact($index)"><i class="fa fa-times"></i></div>
                </td>
                <td class="col-field">
                    <input type="text" ng-init="newContacts.contacts[$index].first_name = c.first_name" ng-model="newContacts.contacts[$index].first_name" class="form-control">
                </td>
                <td class="col-field">
                    <input type="text" ng-init="newContacts.contacts[$index].last_name = c.last_name" ng-model="newContacts.contacts[$index].last_name" class="form-control">
                </td>
                <td class="col-field">
                    <input type="text" ng-init="newContacts.contacts[$index].email = c.email" ng-model="newContacts.contacts[$index].email" class="form-control" required>
                </td>
                <td class="col-field" ng-repeat="g in $parent.groupsArray" id="{{'group-' + $index + '-td-' + $parent.$index}}">
                    <input type="checkbox" ng-init="newContacts.contacts[$parent.$index].groups[g.name] = c.groups[g.name] || false" ng-model="newContacts.contacts[$parent.$index].groups[g.name]">
                </td>
            </tr>
        </tbody>
    </table>
</form>

Here is my form object in my controller:

$scope.form = {};
$scope.newContacts = {
    token: $scope.token,
    contacts: {},
    groups: {}
};

Everything else about the form works as expected except the validations. I'm not sure what I'm missing here. I've tried calling debugger to see what the value of $scope.newContactsForm.$pristine is, and it's always set to true when I expect it to be, which should cause the submit button to be disabled.

1 Answer 1

2

It should be ng-disabled="newContactsForm.$pristine" (Without the $)

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.