Angular ng-disabled失效求助：表单按钮无法正常启用/禁用

嘿，我来帮你搞定这个提交按钮无法正常启用/禁用的问题！咱们先一步步分析原因，再给出解决方案：

问题根源 #

你遇到的核心问题是表单控件没有绑定ng-model——Angular的表单验证系统完全依赖ng-model来追踪输入值的变化和验证状态，没有这个指令的话，表单根本不会把这个输入框纳入状态检测范围。

你原来的输入框用了value="{{visitorDetail2.EmailAddress}}"来填充初始值，但这只是静态的插值，Angular无法感知输入框的后续变化，所以formSendEmail.$invalid的状态一直不会更新，导致按钮的禁用逻辑失效。

另外你尝试的ng-disabled="visitorEmailForSendEmail == undefined || visitorEmailForSendEmail == ''"之所以无效，是因为visitorEmailForSendEmail是表单控件的名称，它对应的是formSendEmail.visitorEmailForSendEmail这个控件对象（包含$valid、$error等属性），而不是作用域里的变量，直接访问的话自然是undefined，按钮就一直处于禁用状态。

至于指向另一个表单formCreateItinerary能正常工作，只是因为那个表单的控件正确绑定了ng-model，它的$invalid状态是正常更新的，但这显然不是你需要的逻辑。

修复方案 #

只需要给输入框添加ng-model，并移除静态的value属性即可：

<form name="formSendEmail" ng-submit="sendEmailAction();">
  <div class="form-group">
    <label class="label label-muted" for="visitorEmailForSendEmail">Visitor E-mail</label>
    <!-- 替换value为ng-model，让Angular追踪输入值 -->
    <input type="email" id="visitorEmailForSendEmail" name="visitorEmailForSendEmail" class="form-control" ng-model="visitorDetail2.EmailAddress" ng-required="true" />
  </div>
  <input type="submit" class="btn btn-primary" value="Send E-mail" ng-disabled="formSendEmail.$invalid" />
</form>

为什么这样能解决问题？ #

• ng-model会自动把visitorDetail2.EmailAddress的初始值填充到输入框里，替代原来的value插值
• Angular会实时追踪输入框的内容变化，结合ng-required="true"和type="email"的验证规则，更新formSendEmail的$invalid状态
• 提交按钮的ng-disabled就能根据当前表单的验证状态，正确启用或禁用

内容的提问来源于stack exchange，提问作者stack questions