javascript - 表单的某些元素在表单的监视事件中未定义

Question

我有一个带有四个输入的 Html 页面，我在 Controller 中的表单上放置了一个 watch ，但在此函数中，我的输入字段之一未定义。 所有元素都以相同的方式定义，但只有一个元素未定义。

我假设只有当表单完全准备好并且所有元素都已构建时才会触发表单上的监视..

这是 HTML 片段:

<form name="hireform" class="form-horizontal form-main" novalidate>
    <div class="form-group">
        <div data-ng-if="isEligible()">
            <label for="inputAcknowledgeDate" xyz-required class="control-label col-xs-6 col-md-3">Gave Information Date</label>

            <div class="col-xs-6 col-md-3">
                <input type="text" id="inputAcknowledgeDate" name="inputAcknowledgeDate" class="form-control" placeholder="mm/dd/yyyy" required ng-pattern="hireUtil.datesRegex" ng-model="hireData.screeningAckDate" ng-disabled="isGaveInformationDateReadOnly || postHire" xyz-date-picker date-check="checkGaveOfferDates()"/>
            </div>
        </div>
    </div>

    <div class="form-group" data-ng-show="isEligible()">
        <label for="offerDate" xyz-required class="control-label col-xs-6 col-md-3">Job Offer Date</label>
        <div class="col-xs-6 col-md-3">
            <input type="text" id="offerDate" name="offerDate" class="form-control" placeholder="mm/dd/yyyy" required ng-model="hireData.offerExtensionDate" ng-pattern="hireUtil.datesRegex" ng-disabled="isOfferDateReadOnly || postHire" xyz-date-picker date-check="checkGaveOfferDates()">
        </div>

    </div>

    <div class="form-group">
        <label for="inputHireDate" xyz-required class="control-label col-xs-6 col-md-3">Employment Hire Date</label>
        <div class="col-xs-6 col-md-3">
            <input type="text" id="inputHireDate" name="inputHireDate" class="form-control" placeholder="mm/dd/yyyy" required ng-pattern="hireUtil.datesRegex"  ng-model="hireData.hireDate" ng-disabled="isHireDateReadOnly || postHire" xyz-date-picker date-check="checkHireStartDates()">
        </div>
    </div>

    <div class="form-group">
        <label for="inputStartDate" xyz-required class="control-label col-xs-6 col-md-3">Employment Start Date</label>
        <div class="col-xs-6 col-md-3">
            <input type="text" id="inputStartDate" name="inputStartDate" required class="form-control" placeholder="mm/dd/yyyy" ng-pattern="hireUtil.datesRegex" ng-model="hireData.actualStartDate" ng-disabled="isStartDateReadOnly|| postHire"
                   xyz-date-picker date-check="checkHireStartDates()">
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-6 col-md-3 hire-submit">
            <button type="submit" class="btn btn-primary float-right" ng-disabled="(isSubmitButtonDisabled)" ng-click="processHire()">Submit</button>
        </div>
        <span class="cancel">
            <button id="cancel-button" xyz-button="link" ng-click="closeSlide()" icon="times" size="lg" type="button" class="btn btn-direct lg">
                <span class="ng-scope"><i class="fa fa-times"></i>Cancel</span>
            </button>
        </span>
    </div>
</form>

JS代码:

$scope.$watch('hireform', function(theForm) {
    if(hireform) {
        if($scope.parameterMap[Constants.gaveInfoDateParameter] == null) {
            $scope.isGaveInformationDateReadOnly = false;   
            notifyDates(Constants.gaveInfoDate,$scope.hireData.screeningAckDate);
        }

        if($scope.parameterMap[Constants.offerDateParameter] == null) {
            $scope.isOfferDateReadOnly = false;
            notifyDates(Constants.offerDate,$scope.hireData.offerExtensionDate);
        }
        if($scope.parameterMap[Constants.hireDateParameter] == null) {
            $scope.isHireDateReadOnly = false;
            notifyDates(Constants.hireDate,$scope.hireData.hireDate);
        }                                                   
        if($scope.parameterMap[Constants.startDateParameter] == null) {
            $scope.isStartDateReadOnly = false;
            notifyDates(Constants.startDate,$scope.hireData.actualStartDate);
        }
    }
 });


var notifyDates = function(dateName,dateValue) {
    for (var key in $scope.parameterMap)
    {
        var dependencyExpression = $scope.parameterMap[key];
        if(dependencyExpression != null) {
            if (getDependentDateType(dependencyExpression)==dateName){
                switch (key) {
                    case Constants.gaveInfoDateParameter:
                        $scope.hireform.inputAcknowledgeDate.$setViewValue(evaluateDateExpression(dateValue,dependencyExpression));
                        $scope.hireform.inputAcknowledgeDate.$render();
                        break;
                    case Constants.offerDateParameter:
                        $scope.hireform.offerDate.$setViewValue(evaluateDateExpression(dateValue,dependencyExpression));
                        $scope.hireform.offerDate.$render();
                        break;
                    case Constants.hireDateParameter:
                        $scope.hireform.inputHireDate.$setViewValue(evaluateDateExpression(dateValue,dependencyExpression));
                        $scope.hireform.inputHireDate.$render();
                        break;
                    case Constants.startDateParameter:
                        $scope.hireform.inputStartDate.$setViewValue(evaluateDateExpression(dateValue,dependencyExpression));
                        $scope.hireform.inputStartDate.$render();
                }
            }
        }
    }
};

在 notifyDates 中，$scope.hireform.inputAcknowledgeDate 未定义，而其余的都是有效对象。

Answer 1

这很可能是由于 HTML 中 ng-show 和 ng-if 使用不一致造成的。

ng-show

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute

ng-if

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

由于差异，如果条件为 false，则使用 ng-if 的第一个 block 根本不会被渲染，这反过来会导致表单元素未定义。在使用 ng-show 的另一个 block 中，表单元素仍然呈现，但隐藏，因此不是 undefined。