disable button angular if $invalid

Question

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>

`addressForm` doesn't exist in the (outer) scope you are referencing it from. It can only be referenced within the `
` element where it exists. You need to put those controls inside the `
` anywhere for them to work. — aaronofleonard, Apr 18 '16 at 21:24
@Amleonard is there anyway around this, as I have different actions depending upon whether I am editing or adding a contact — , Apr 18 '16 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. — aaronofleonard, Apr 18 '16 at 21:27

score 1 · Accepted Answer · answered Apr 18 '16 at 21:38

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.

disable button angular if $invalid

1 Answers1