2

Estou fazendo uma aplicação aonde eu faço o cadastro de uma nova empresa, sou inciante em java script e também estou usando Angular no meu projeto. O que eu quero fazer é, quando o usuário clicar em cadastrar, dar uma mensagem de sucesso e depois voltar para pagina inicial, eu tentei com alert, mas não sei como fazer com que a mensagem aparece apenas depois que o cadastro for realizado com sucesso.

Este é meu form :

<form role="form" name="formCadastroEmpresa" ng-submit="formCadastroEmpresa.$valid && cadastrarEmpresa()" novalidate>

Preciso chamar a mensagem submit="formCadastroEmpresa.$valid && cadastrarEmpresa()" for verdadeiro, e antes de chamar o cadastrarEmpresa() do angular eu preciso dar um alerta, ou qualquer outra coisa do tipo para avisar ao usuário que ocorreu tudo certo.

Um exemplo de form group que estou usando:

<div class="form-group"  ng-class="{ 'has-error' : formCadastroEmpresa.empresaTelefone.$touched && formCadastroEmpresa.empresaTelefone.$invalid }">
   <label>Telefone</label>
   <input 
      minlength="13"
      name="empresaTelefone"
      class="form-control"
      id="telefone"
      placeholder="Telefone fixo"
      ng-model="empresa.telefone" required>
</div>
<p ng-show=" formCadastroEmpresa.$submitted && formCadastroEmpresa.empresaTelefone.$invalid" style="color:red">Um telefone para contato é necessário</p>

1 Resposta 1

1

Você pode utilizar a biblioteca angular-growl que é bem legal. Exemplo:

angular.module('myApp', ['angular-growl', 'ngAnimate']);

angular.module('myApp').config(['growlProvider', function (growlProvider) {
  //Configuração do tempo que a mensagem ficará na tela
  growlProvider.globalTimeToLive(5000);
}]);

angular.module('myApp').controller("myCtrl", function($scope, growl){
 $scope.alerta = function(){
    var config = {};
    growl.success("<b>Mensagem de Sucesso</b>", config);
    growl.info("Mensagem Info", config);
    growl.warning("Mensagem Alerta", config);
    growl.error("Mensagem Erro :(", config);
 }
});
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//rawgit.com/JanStevens/angular-growl-2/master/build/angular-growl.css" />

<div ng-app="myApp" ng-controller="myCtrl">
   <div growl></div>
   <button class="btn btn-success" ng-click="alerta()">Alerta</button>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-animate.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-sanitize.js" type="text/javascript"></script>
<script src="//rawgit.com/JanStevens/angular-growl-2/master/build/angular-growl.js" type="text/javascript"></script>

Não se esqueça de adicionar as dependências no seu projeto.

2
  • 1
    Muito obrigado pela resposta, vou adicionar ao meu codigo, valeu amigo. 12/07/2016 às 11:32
  • Boa sorte e bons estudos @WilliamCézar 12/07/2016 às 11:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .