0

I cannot figure out why the following code isn't working. I am following the answer here and various other tutorials/answers but the button is not disabling when the fields are empty.

<h3>Add address</h3>
<div ng-include="'app/views/partials/form.html'"></div>
<button ng-click="ctrl.cancelAddress()">Cancel</button>
<button ng-disabled="addressForm.$invalid" class="save-btn" ng-click="ctrl.saveAddress(ctrl.name, ctrl.address, ctrl.country)">Save</button>

app/views/partials/form.html

<form name="addressForm" novalidate>
    <input ng-model="ctrl.name" type="text" name="RecipientName" required>
    <p ng-show="addressForm.RecipientName.$error.required">Username is required</p>

    <input ng-model="ctrl.address" type="text" name="AddressLineOne" placeholder="Address" required>
    <p ng-show="addressForm.RecipientName.$error.required">Address is required</p>

    <select ng-model="ctrl.country">
       <option ng-repeat="country in ctrl.countries" value="{{country.name}}">{{country.name}}</option>
       <p ng-show="addressForm.addressCountry.$error.required">Username is required</p>
    </select>
</form>
Improve this question
3
  • 1
    addressForm doesn't exist in the (outer) scope you are referencing it from. It can only be referenced within the <form> element where it exists. You need to put those controls inside the <form> anywhere for them to work. Commented Apr 18, 2016 at 21:24
  • @Amleonard is there anyway around this, as I have different actions depending upon whether I am editing or adding a contact Commented Apr 18, 2016 at 21:25
  • It depends, is your form aware of whether or not you are editing? Because if so, you can move those buttons into the form, and then use ng-if="ctrl.isEditing". Of course, ctrl.isEditing would be replaced with whatever method you have of knowing if there is editing available. Commented Apr 18, 2016 at 21:27

1 Answer 1

Reset to default
1

I'll put them as an answer for easier access.

addressForm doesn't exist in the (outer) scope you are referencing it from. It can only be referenced within the <form> element where it exists. You need to put those controls inside the <form> anywhere for them to work.

Is your form aware of whether or not you are editing? Because if so, you can move those buttons into the form, and then use ng-if="ctrl.isEditing". Of course, ctrl.isEditing would be replaced with whatever method you have of knowing if there is editing available.

Improve this answer
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.