ng-deaktiviert noch die Schaltfläche "Senden" aktivieren

Question

Ich hoffe, Sie können mir helfen.

Ich denke, ich vermisse etwas und kann es einfach nicht herausfinden. Aus irgendeinem Grund kann ich ng-disabled="formSubmmision" nicht aktivieren, um die Schaltfläche zu aktivieren, wenn das Formular ausgefüllt wurde.

Jede Hilfe wird sehr geschätzt werden!

ich die folgende Ansicht und Controller haben:

Hier ist meine Ansicht:

<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> 

Hier mein Controller ist:

(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

löste ich mein Problem durch eine andere einfache Funktion formSubmit() meinen Controller genannt Zugabe:

function getItemGroupById(itemGroupId) { 
    return $http.get("/api/itemGroup/GetItemGroupById/?itemGroupId=" + itemGroupId) 
     .then(Success) 
     .then(formSubmit) 
     .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 formSubmit() { 
    vm.formSubmmision = false; 
    return vm.formSubmmision; 
} 

Answer 2

Sie verwenden Controller als Syntax .

Ihr Controller sollte ...

var vm = this; 

NICHT ...

var vm = $scope; 

auch sollten Sie verwenden ...

formInsertVendorNumber. $ Valid die Aktivierung oder Deaktivierung Schaltfläche "Senden"

Sie sollten in Ihrer Form, Display ...

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

Dies wird ausgegeben viele Winkelvariablen mit der Form verbunden. Sie sollten diese formInsertVendorNumber sehen. $ Valid ist wahr, wenn das Formular gültig ist, und false, wenn dies nicht der Fall ist. Verwenden Sie das, um Ihre Schaltfläche umzuschalten.