Как создать кнопку отправки с помощью ui-sref в угловых

0

У меня есть многоступенчатая форма, каждый шаг имеет btn-link для перехода к следующему шагу. Я достигаю этого с помощью угловых маршрутов таким образом:

<button ui-sref="next.step" class="btn btn-link"></button>

На одном из шагов в середине всей формы мне нужно отправить данные, поэтому мне нужна уже описанная кнопка, чтобы отправить форму, а также, только если форма может быть представлена, а затем перейдите к следующему шагу. Я пытался это сделать, но он не работает, потому что он перенаправляется на следующий шаг, не заботясь о форме

<button ui-sref="next.step2" type="submit" class="btn btn-link"></button>

Как я могу достичь этого с помощью углового?

Теги:
forms
submit

2 ответа

2
Лучший ответ

вам не нужно использовать ui-sref для вашей следующей кнопки, вместо этого используйте $state service от вашего контроллера, как показано ниже

Код HTML

<form ng-submit="onFormSubmission($event)">
    <button type="submit" class="btn btn-link"></button>
</form>

контроллер

var successCallback = function(response) {
    //process response
    $state.go("next.step2");
}

$scope.onFormSubmission = function($event) {

    var data = getFormData();

    $http.post('/someUrl', data, config).then(successCallback, errorCallback);

}
  • 0
    Нужно ли передавать $event в функцию?
  • 0
    нет, вы можете пропустить это
2

Используйте ng-submit чтобы отправить форму и показать какое-то загружаемое сообщение, когда форма сохраняется, используйте $http для отправки данных и успеха, чтобы перейти к следующему маршруту с помощью $state.go.

<script>
  angular.module('submitExample', [])
    .controller('ExampleController', ['$scope', '$state', function($scope, $state) {
      $scope.list = [];
      $scope.text = 'hello';
      $scope.submit = function() {
        $http.get('/aveData', config).then(function(response){
           $state.go('next.step2')
        }, function(){
           alert('error saving data');
        });
      };
    }]);
</script>
<form ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter:
  <input type="text" ng-model="text" name="text" />
  <input type="submit" id="submit" value="Submit" />
</form>
  • 0
    Хотя ваш ответ тоже работает, мне кажется, что ответ от S4beR легче понять. Я не могу принять оба, извините

Ещё вопросы

Сообщество Overcoder
Наверх
Меню