Question

我有一个指令，用表格字段值（event_postcode）查询google maps api。它必须是必填字段。然而，当填充字段并且地图api（通过manageEventsSrv.getPostcodeLocation（））返回有效地址时，表单提交按钮仍然被禁用，即表单无效。

我的指示：

app.directive('geoLocatePostcode', ['manageEventsSrv', function(manageEventsSrv) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link : function(scope, elem, attrs, ctrl){
            var valid = false;
            ctrl.$parsers.unshift(function(value) {
                if(value.length>=3){
                    manageEventsSrv.getPostcodeLocation(value+',uk').then(function(result){
                        valid = true;
                        scope.point = new Parse.GeoPoint({latitude:result.lat,longitude:result.lng}); // parse.com geopoint
                        ctrl.$setValidity('locationNotFound', true);
                    }, function(result){                            
                        valid = false;
                        ctrl.$setValidity('locationNotFound', false);
                    });
                } else {
                    ctrl.$setValidity('locationNotFound', true);
                    valid = false;
                }
                return valid ? value : undefined;
            });
        }
    }
}]);

表单字段：

<input type="text" placeholder="First 4 Characters Only" ng-model="event_postcode" maxlength="4" name="event_postcode" required geo-locate-postcode>

<span data-ng-show="createEventForm.event_postcode.$error.locationNotFound">Location not found</span>

<button type="submit" class="button" ng-disabled="createEventForm.$invalid">Create</button>

我认为我没有实施＆＃34; required＆＃34;使用自定义指令时正确。

Answer 1

想想我可能已经到底了......我需要改变 return valid ? value : undefined;至return valid ? value : false;

使用自定义指令将表单字段设置为必需

1 个答案: