javascript - ng-disabled 也没有启用提交按钮

Question

我希望你能帮助我。

我想我遗漏了什么，只是想不通。出于某种原因，我无法在填写表单后启用 ng-disabled="formSubmmision" 按钮。

任何帮助将不胜感激!

我有以下 View 和 Controller :

这是我的观点:

<section class="mainbar" data-ng-controller="adminVendorNumberController as vm">
    <article class="booty">
        <div class="row-fluid">
            <div class="col-md-12">
                <h1 class="main-heading"><strong>Vendor&nbsp;Number&nbsp;Admin</strong></h1>
            </div>
        </div>

        <form name="formInsertVendorNumber" novalidate>
            <div class="row-fluid island">
                <div class="col-md-12">
                    <div>
                        <!--Here-->

                        <div class="header">
                            <div class="green"><span class="icon-user-tie"></span></div>
                            <h2 class="title">Add&nbsp;New&nbsp;<strong>Vendor&nbsp;Number</strong></h2>
                        </div>

                        <div class="row-fluid">
                            <!-- Customer-->
                            <div class="col-md-4">


                                <label>Vendor</label>
                                <div class="input-dropdown">
                                    <cc-dropdown cc-placeholder="Select Vendor"
                                                 ng-model="NewVendorNumber.Vendor"
                                                 ng-disabled="false"
                                                 ng-options="vendorData"
                                                 cc-fields="VendorDescription"
                                                 cc-key-field="VendorId"
                                                 cc-allow-search="false"
                                                 ng-required="false"
                                                 ng-change="vendorSelected()"
                                                 name="iVendor">
                                    </cc-dropdown>
                                </div>
                            </div>
                            <!-- End Customer-->
                            <!--Region -->

                            <!-- Update: ng-disabled="NewVendorNumber.Vendor == null" -->

                            <div class="col-md-4">
                                <label>Item Group</label>
                                <div class="input-dropdown">
                                    <cc-dropdown cc-placeholder="Select Item Group"
                                                 ng-model="NewVendorNumber.ItemGroup"
                                                 ng-disabled="NewVendorNumber.Vendor == null" 
                                                 ng-options="itemGroupData"
                                                 cc-fields="ItemGroupDescription"
                                                 cc-key-field="ItemGroupId"
                                                 cc-allow-search="false"
                                                 ng-required="false"
                                                 ng-change="itemGroupSelected()"
                                                 name="iItemGroup">
                                    </cc-dropdown>
                                </div>
                            </div>
                            <!--End Region -->


                            <div class="col-md-4">
                                <label>Vendor Item Number</label>
                                <div class="input-text">
                                    <input type="text" name="iVendorItemNumber" required ng-model="NewVendorNumber.ItemNumber" />
                                    <div class="errorIcon fadeInOut" ng-class="{error : VendorItemError}" ng-mouseenter="VendorItemError = true" ng-mouseleave="VendorItemError = false"
                                         ng-show="(formInsertVendorNumber.$submitted || formInsertVendorNumber.iVendorItemNumber.$touched) && formInsertVendorNumber.iVendorItemNumber.$error.required">
                                        <span class="icon-warning"></span>
                                        <div>
                                            <p>
                                                <span>Please enter a Vendor Item Number</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <label>Vendor Item Description</label>
                                <div class="input-text">
                                    <input type="text" name="iVendorItemDescription" required ng-model="NewVendorNumber.ItemDescription" />
                                    <div class="errorIcon fadeInOut" ng-class="{error : VendorItemDescriptionError}" ng-mouseenter="VendorItemDescriptionError = true" ng-mouseleave="VendorItemDescriptionError = false"
                                         ng-show="(formInsertVendorNumber.$submitted || formInsertVendorNumber.iVendorItemDescription.$touched) && formInsertVendorNumber.iVendorItemDescription.$error.required">
                                        <span class="icon-warning"></span>
                                        <div>
                                            <p>
                                                <span>Please enter a Vendor Item Description</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="separator"></div>
                        <div class="footer">
                            <!-- Update: ng-disabled="formSubmmision" -->
                            <button type="submit" class="btn btn-default  right" ng-click="save()" ng-disabled="formSubmmision"><span class="icon-checkmark">&nbsp;</span>Save</button>

                        </div>

                    </div>
                </div>
            </div>
        </form>

    </article>
</section>

这是我的 Controller :

(function () {
    "use strict";

    angular
        .module('app.adminVendorNumber')
        .controller('adminVendorNumberController', adminVendorNumberController);

    adminVendorNumberController.$inject = ['$http', 'logger', '$scope'];

    function adminVendorNumberController($http, logger, $scope) {
        var vm = $scope;
        vm.formSubmmision = true;

        vm.vendorItemData = null;
        vm.itemGroupData = null;
        vm.vendorData = null;
        vm.vendorSelected = vendorSelected;
        vm.itemGroupSelected = itemGroupSelected;
        vm.save = save;

        activate();

        function activate() {
            return vendorItemData().then(getAllItemGroups).then(getVendorData).then(function () {
                logger.info('Activated Vendor Number Creation');
            });
        }


        function vendorItemData(data) {
            return $http.get('/api/vendorItem/getAll/')
            .then(Success)
            .catch(Failure);


            function Success(responce) {
                vm.vendorItemData = responce.data.Records;
                return vm.vendorItemData;
            }

            function Failure(error) {
                logger.error('Failed to Get Customer Data ' + error.data.Message);
            }
        }

        function getVendorData(data) {
            return $http.get('/api/vendor/GetAllVendors/')
                .then(Success)
                .catch(Failure);

            function Success(responce) {
                vm.vendorData = responce.data.Records;
                return vm.vendorData;
            }

            function Failure(error) {
                logger.error('Failed to Get Vendor Data ' + error.data.Message);
            }

        }

        function getAllItemGroups(data) {
            return $http.get('/api/itemGroup/GetAllItemGroups/')
          .then(Success)
          .catch(Failure);

            function Success(response) {
                vm.itemGroupData = response.data.Records;
                return vm.itemGroupData;
            }

            function Failure(error) {
                logger.error('Failed to Get Item Group Data ' + error.data.Message);
            }
        }

        // Form Selections

        function itemGroupSelected() {

            vm.formSubmmision = true;
            return getItemGroupById(vm.NewVendorNumber.ItemGroup.ItemGroupId);
        }

        function getItemGroupById(itemGroupId) {
            return $http.get("/api/itemGroup/GetItemGroupById/?itemGroupId=" + itemGroupId)
                .then(Success)
                .catch(Failure);

            function Success(responce) {
                vm.itemGroupSelected = responce.data.Records;
                return vm.itemGroupSelected, responce.data;
            }

            function Failure(error) {
                logger.error('Failed to get Vendor Data ' + error.data.Message);
            }
        }



        function vendorSelected() {

            vm.formSubmmision = true;
            return getVendorById(vm.NewVendorNumber.Vendor.VendorId);
        }

        function getVendorById(vendorId) {
            return $http.get("/api/vendor/ReadVendor/?vendorid=" + vendorId)
                .then(Success)
                .catch(Failure);

            function Success(responce) {
                vm.vendorSelected = responce.data.Records;
                return vm.vendorSelected, responce.data;
            }

            function Failure(error) {
                logger.error('Failed to get Vendor Data ' + error.data.Message);
            }
        }

        // Save

        function save() {
            if (vm.formInsertVendorNumber.$valid) {
                postNewData();
            }
            else {
                logger.error('Error: Validation failed. Please correct data and try again');
                vm.formSubmmision = false;
            }
        }

        function postNewData() {
            //prepare data 
            var data = {
                VendorItemId: 0,
                ItemNumber: vm.NewVendorNumber.ItemNumber,
                ItemDescription: vm.NewVendorNumber.ItemDescription,
                ItemType: "",
                OnCall: "",
                Vendor: {
                    VendorId: vm.NewVendorNumber.Vendor.VendorId,
                    VendorDescription: vm.NewVendorNumber.Vendor.VendorDescription,
                    Active: vm.NewVendorNumber.Vendor.Active,
                    Id: vm.NewVendorNumber.Vendor.Id,
                    ChangedDate: vm.NewVendorNumber.Vendor.ChangedDate
                },
                ItemGroup: {
                    ItemGroupId: vm.NewVendorNumber.ItemGroup.ItemGroupId,
                    ItemGroupDescription: vm.NewVendorNumber.ItemGroup.ItemGroupDescription,
                    Id: vm.NewVendorNumber.ItemGroup.Id,
                    ItemCodeGroup: vm.NewVendorNumber.ItemGroup.ItemCodeGroup
                }
        }

            $http.post('/api/vendorItem/PostVendorItem/', data)
                .then(postDataComplete)
                .catch(getDataFailed);

            function postDataComplete(response) {
                logger.info("Vendor Item Number Created ");
                vm.NewVendorNumber = null;
                vm.formSubmmision = true;
                vm.formInsertVendorNumber.$setPristine();
                vm.formInsertVendorNumber.$setUntouched();
                return vm.NewVendorNumber;
            }

            function getDataFailed(error) {
                logger.error('Failed to Vendor Item Number ' + error.data.Message);
                return;
            }
        }
    };
}
)();

Answer 1

您正在使用 CONTROLLER AS 语法。

你的 Controller 应该是......

var vm = this;

不...

var vm = $scope;

你也应该使用......

formInsertVendorNumber.$有效禁用或启用提交按钮。

你应该在你的表单中显示......

<span>{{ formInsertVendorNumber }}</span>

这会输出很多与表单相关的 Angular 变量。您应该看到 formInsertVendorNumber.$valid 在表单有效时为 true，在无效时为 false。用它来切换你的按钮。