javascript - ng-disabled用在按钮中不起作用的原因是什么

Question

我有一个 Angular 表单，我正在其中进行验证。如果任何必填字段为空且验证失败，我希望表单无法提交。表格如下。

<form name="userForm" novalidate>
    <fieldset ng-disabled="data.externalUserDisable">
        <div class="restrictwidth">
            <h1 ng-if="data.urlId === 'new'" translate>NewUser</h1>
            <div class="form-group required" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
                <label class="control-label" translate>UsernameEmail</label>
                <input class="form-control" type="email" id="username" name="username" ng-model="user.Username" ng-model-options="{'update On': 'blur'}" ng-disabled="(!data._editMode && !(user.Status === 'NotVerified' || user.Status === 'ActivationPending'))" ng-maxlength="256" required>
                <div class="error-messages" ng-messages="userForm.username.$error" ng-if="userForm.$submitted || !userForm.username.$pristine">
                    <div ng-message="required" class="help-block error-message"><span translate="UsernameRequired"></span></div>
                </div>
            </div>
            <div class="row">
                <div class="form-group required col-sm-6" ng-class="{ 'has-error' : userForm.firstName.$invalid && !userForm.firstName.$pristine }">
                    <label class="control-label" translate>FirstName</label>
                    <input class="form-control" type="text" id="firstName" name="firstName" ng-model="user.FirstName" ng-maxlength="64" required>
                    <div class="error-messages" ng-messages="userForm.firstName.$error" ng-if="userForm.$submitted || !userForm.firstName.$pristine">
                        <div ng-message="maxlength" class="help-block error-message"><span translate="FirstNameLength"></span></div>
                        <div ng-message="required" class="help-block error-message"><span translate="FirstNameRequired"></span></div>
                    </div>
                </div>
                <div class="form-group required col-sm-6" ng-class="{ 'has-error' : userForm.lastName.$invalid && !userForm.lastName.$pristine }">
                    <label class="control-label" translate>LastName</label>
                    <input class="form-control" type="text" id="lastName" name="lastName" ng-model="user.LastName" ng-maxlength="64" required>
                    <div class="error-messages" ng-messages="userForm.lastName.$error" ng-if="userForm.$submitted || !userForm.lastName.$pristine">
                        <div ng-message="maxlength" class="help-block error-message"><span translate="LastNameLength"></span></div>
                        <div ng-message="required" class="help-block error-message"><span translate="LastNameRequired"></span></div>
                    </div>
                </div>
            </div>               
            <div class="form-group required" ng-class="{ 'has-error' : userForm.masterEngagement.$invalid && !userForm.masterEngagement.$pristine }">
                <label class="control-label" translate>MasterEngagement</label><i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
                <input type="text" name="masterEngagement" ng-model="user.MasterEngagementId" ng-if="!data.externalUserDisable" typeahead="engagement.EngagementId as engagement.EngagementName for engagement in getLocation($viewValue)" typeahead-on-select='onSelect($item, $model, $label)'
                       typeahead-loading="loadingLocations" typeahead-editable="false" typeahead-input-formatter="formatLabel($model)" typeahead-template-url="customTemplate.html" typeahead-wait-ms="500" class="form-control" ng-disabled="singleEngagementAdmin !== '0'" required>
                <input type="text" name="masterEngagement" ng-model="user.MasterEngagementName" ng-if="data.externalUserDisable" class="form-control" ng-disabled="singleEngagementAdmin !== '0'" required>
            </div>

            ...

            <div class="restrictwidth">
                <button ng-if="data.urlId === 'new'" type="submit" class="btn btn-primary btn-lg pull-right ladda-button" data-style="expand-left" ng-save-in-progress ng-disabled="{{ userForm.$invalid }}" ng-click="insert()" translate>Save</button>
                <button ng-if="data.urlId !== 'new'" type="submit" class="btn btn-primary btn-lg pull-right ladda-button" data-style="expand-left" ng-save-in-progress ng-disabled="userForm.$invalid || (!superUser && user.Superuser)" ng-click="update()"><span class="ladda-label" translate>Update</span></button>                 
                <a class="btn btn-link pull-left" ng-click="back()" type="button"><span class="ladda-label" translate>Cancel</span></a>
            </div>
        </div>
    </fieldset>
</form>

使用 ng-disabled 禁用保存按钮是正确的。但该按钮并未被禁用。当表单加载时，该按钮不会被禁用，即使出现验证错误，该按钮也不会被禁用。

我已检查 userForm 对象，$invalid 值为 true，$valid 值为 false。

我想知道是什么原因导致这种情况发生？可能的原因是什么？

更新

输出表单打印userForm..

{
  "$error": {
    "required": [
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [],
        "$formatters": [
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "username",
        "$options": {
          "update On": "blur",
          "updateOnDefault": true
        }
      },
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [],
        "$formatters": [
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "firstName",
        "$options": null
      },
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [],
        "$formatters": [
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "lastName",
        "$options": null
      },
      {
        "$validators": {},
        "$asyncValidators": {},
        "$parsers": [
          null
        ],
        "$formatters": [
          null,
          null
        ],
        "$viewChangeListeners": [],
        "$untouched": true,
        "$touched": false,
        "$pristine": true,
        "$dirty": false,
        "$valid": false,
        "$invalid": true,
        "$error": {
          "required": true
        },
        "$name": "masterEngagement",
        "$options": null
      }
    ]
  },
  "$name": "userForm",
  "$dirty": false,
  "$pristine": true,
  "$valid": false,
  "$invalid": true,
  "$submitted": false,
  "username": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "username",
    "$options": {
      "update On": "blur",
      "updateOnDefault": true
    }
  },
  "firstName": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "firstName",
    "$options": null
  },
  "lastName": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "lastName",
    "$options": null
  },
  "title": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "title",
    "$options": null
  },
  "employeeNumber": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "employeeNumber",
    "$options": null
  },
  "userInfo": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "userInfo",
    "$options": null
  },
  "timeZone": {
    "$viewValue": "W. Europe Standard Time",
    "$modelValue": "W. Europe Standard Time",
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "timeZone",
    "$options": null
  },
  "culture": {
    "$viewValue": "en-US",
    "$modelValue": "en-US",
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "culture",
    "$options": null
  },
  "policy": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [],
    "$viewChangeListeners": [
      null
    ],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": true,
    "$invalid": false,
    "$error": {},
    "$name": "policy",
    "$options": null
  },
  "masterEngagement": {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [
      null
    ],
    "$formatters": [
      null,
      null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
      "required": true
    },
    "$name": "masterEngagement",
    "$options": null
  }
}

Answer 1

实际上按钮标签一切正常，请查看此演示:http://plnkr.co/edit/fJoq7RLrDNYMxYwh6bPq?p=preview

您的案例中的问题是ng-if指令创建一个内部作用域，但 form 是在父作用域中声明的。在这种情况下，要根据您拥有的表单禁用该按钮，您需要从父级访问它。 简化后会是这样的:

<button type="submit" ng-disabled="$parent.userForm.$invalid">Save</button>

编辑: 有两个ng-if意味着在这种情况下您必须使用两个父作用域，在原始代码中，有一个 ng-if访问无效属性是通过 $parent.userForm.$invalid ，有两个ng-if是

<button type="submit" ng-if="data.urlId === 'new'" ng-disabled="$parent.$parent.userForm.$invalid">Save</button>

可以通过使用 ng-show 来避免这种情况或ng-hide而不是ng-if ，区别在于前两个不创建内部作用域，而每个 ng-if将在其父级内创建其范围。如果您将 ng-if 更改为 ng-show，则该按钮将与您原来的 ng-disabled="userForm.$invalid" 一起使用。 .