如果 $invalid 禁用按钮角度答案

【问题标题】：disable button angular if $invalid如果 $invalid 禁用按钮角度
【发布时间】：2016-08-10 19:29:43
【问题描述】：

我无法弄清楚为什么以下代码不起作用。我正在关注答案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>

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 在您引用它的（外部）范围内不存在。它只能在它存在的<form> 元素中被引用。您需要将这些控件放在<form> 中的任何位置，以便它们工作。
@Amleonard 无论如何都在这附近，因为我有不同的操作，具体取决于我是在编辑还是添加联系人
这取决于，您的表单是否知道您是否正在编辑？因为如果是这样，您可以将这些按钮移动到表单中，然后使用ng-if="ctrl.isEditing"。当然，ctrl.isEditing 将被替换为您知道是否有可用编辑的任何方法。

标签： javascript angularjs forms

【解决方案1】：

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

addressForm 在您引用它的（外部）范围内不存在。它只能在它存在的<form> 元素中被引用。您需要将这些控件放在<form> 中的任何位置，以便它们工作。

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

【讨论】：