如果$ invalid,则禁用按钮角度

时间:2016-04-18 21:22:09

标签: javascript angularjs forms

我无法弄清楚为什么以下代码无效。我正在按照答案here和其他各种教程/答案,但是当字段为空时按钮不会禁用。

<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>

应用/视图/分音/ 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>

1 个答案:

答案 0 :(得分:1)

我会将它们作为答案,以便于访问。

addressForm不存在于您引用它的(外部)范围内。它只能在它所在的<form>元素中引用。您需要将这些控件放在<form>的任何位置,以便它们起作用。

您的表单是否知道您是否正在编辑?因为如果是这样,您可以将这些按钮移动到表单中,然后使用ng-if="ctrl.isEditing"。当然,ctrl.isEditing将替换为您知道是否有可用编辑的任何方法。