Tôi có thể kích hoạt gửi biểu mẫu từ bộ điều khiển không?

Question

Tôi muốn gửi biểu mẫu truyền thống từ trong bộ điều khiển. Kịch bản là tôi muốn nhấn một tuyến đường trên máy chủ web của tôi và chuyển hướng đến phản hồi của nó, tôi có thể thực hiện với biểu mẫu thông thường trong HTML, nhưng tôi cũng muốn thực hiện xác thực trên các trường của nó khi nút gửi được nhấn và nếu xác thực không thành công, tôi không muốn thực hiện tuyến đường.

Tôi biết rằng không hợp lệ, nhưng tôi chỉ muốn xác thực diễn ra khi nhấn nút.

Có cách nào có điều kiện gửi biểu mẫu từ trong bộ điều khiển không?

Answer 1

Bạn đã cố sử dụng chỉ thị ng-submit trên biểu mẫu của mình chưa? Bạn có thể trả về true/false sau khi xác thực.

khiển

app.controller('MainCtrl', ['$location', function($scope, $location) { 
    $scope.submit = function(user) { 
    var isvalid = true; 
    // validation 
    if (isvalid) { 
     $http.get('api/check_something', {}).then(function(result) { 
      $location.path(result.data); 
     }); 
     return true; 
    } 
    return false; //failed 
    } 
}); 

Html (bạn không phải có một thuộc tính action)

<form name="formuser" ng-submit="submit(user)"> 
    <input type="text" ng-model="user.firstname" /> 
    <input type="text" ng-model="user.lastname" /> 
    <button type="submit">Submit</button> 
</form> 

Answer 2

Làm thế nào về chỉ ra bên phải vô hiệu hóa nút gửi đến các hình thức có giá trị:

<button type="submit" ng-disabled="form.$invalid">Submit</button> 

Hãy xem câu hỏi tương tự mà tôi đã có: AngularJS Form Validation with Directives - "myform.$valid" not quite right for me

Answer 3

Bạn có thể thêm phương thức gửi vào FormController. Tôi đã làm như vậy:

<form ng-form-commit action="/" name='payForm' method="post" target="_top"> 
    <input type="hidden" name="currency_code" value="USD"> 
    <button type='button' ng-click='save(payForm)'>buy</button> 
</form> 

.directive("ngFormCommit", [function(){ 
    return { 
     require:"form", 
     link: function($scope, $el, $attr, $form) { 
      $form.commit = function() { 
       $el[0].submit(); 
      }; 
     } 
    }; 
}]) 

.controller("AwesomeCtrl", ["$scope", function($scope){ 
    $scope.save = function($form) { 
    if ($form.$valid) { 
     $form.commit(); 
    } 
    }; 
}]) 

Answer 4

Đây không phải là cách “góc” để làm điều đó nhưng bạn có thể gửi biểu mẫu bằng javascript vani. Ví dụ, bạn có thể cung cấp dưới hình thức một id và làm:

document.getElementById('myForm').submit()

hoặc nếu bạn có một nút gửi, bạn có thể nhấp vào nó:

document.getElementById('myForm-submit').click()

tôi thấy rằng cái đầu tiên không giữ các ràng buộc dữ liệu (tôi đã sử dụng nó trên một dự án với một widget JQuery mà không có thay thế góc), nhưng thứ hai giữ các ràng buộc. Tôi giả định điều này đã làm với cách các widget JQuery đã được viết.

Bạn có thể xem thêm về kích hoạt các hình thức với vani JS ở đây:

How to submit a form using javascript?

Answer 5

Mở rộng từ @ câu trả lời ReklatsMasters, nếu bạn muốn thay đổi một giá trị trước khi trình các hình thức, bạn có thể làm như vậy ...

<form ng-form-commit action="/" name='payForm' method="post" target="_top"> 
    <input type="hidden" id="currency_code" name="currency_code" value="USD"> 
    <button type='button' ng-click='save('GBP', payForm)'>buy</button> 
</form> 

.directive("ngFormCommit", [function(){ 
    return { 
     require:"form", 
     link: function($scope, $el, $attr, $form) { 
      $form.commit = function($newCurrency) { 
       $el[0].querySelector('#currency_code').value = $newCurrency; 
       $el[0].submit(); 
      }; 
     } 
    }; 
}]) 

.controller("AwesomeCtrl", ["$scope", function($scope){ 
    $scope.save = function($newCurrency, $form) { 
    if ($form.$valid) { 
     $form.commit($newCurrency); 
    } 
    }; 
}])