Reputation: 177

Validate with AngularJS

I have a form that I want to validate with ng-click, I have some required fields e some fields like email.

<form role="form" name="cadastroEmpresa"
      novalidate>

    <div class="row">
        <div class="col-lg-12">
            <div class="col-lg-6">
                <div class="form-group">

                    <label>Nome</label>
                    <input class="form-control"
                           placeholder="Nome da empresa"
                           ng-model="empresa.nome">
                </div>

                <div class="form-group">
                    <label>CNPJ</label>
                    <input
                        id="cnpj"
                        class="form-control"
                        placeholder="Entre com o CNPJ"
                        ng-model="empresa.cnpj">
                </div>

                <div class="form-group">
                    <label>Endereço</label>
                    <input type="email"
                           name="inputemail"
                           class="form-control"
                           placeholder="Entre com o endereço pela empresa"
                           ng-model="empresa.endereco">
                </div>

                <div class="form-group">
                    <label>Email</label>
                    <input
                        type="email"
                        class="form-control"
                        placeholder="Email da empresa"
                        ng-model="empresa.email">
                </div>

            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Nome do Responsável</label>
                    <input class="form-control"
                           placeholder="Nome do responsável da empresa"
                           ng-model="empresa.nomeResponsavel" required>
                </div>

                <div class="form-group">
                    <label>Telefone</label>
                    <input class="form-control"
                           id="telefone"
                           placeholder="Telefone fixo"
                           ng-model="empresa.telefone" required>
                </div>

                <div class="form-group">
                    <label>Celular</label>
                    <input class="form-control"
                           id="celular"
                           ng-model="empresa.celular"
                           placeholder="Telefone celular">
                </div>

                <div class="form-group">
                    <label>Data de Vencimento</label>
                    <input class="form-control"
                           ng-model="empresa.dataVencimentoMensalidade"
                           placeholder="Data de Vencimento da Mensalidade">
                </div>
            </div>
        </div>
    </div>
</form>

I Want to validate when user clicks the button, and mark in red the field that have erros, but I'm pretty new with angular so I not sure how I do that, if some one could give me example I'll be able to finish my application. Thank you everyone.

Upvotes: 1

Answers (4)

gianni

Reputation: 1347

You just need to create a CSS for that, angular already adds the required classes for validation.

this class is added automatically to required fields, you just need to give it your style, for example:

.ng-submitted .ng-invalid {
color: #f00;
border: 1px solid #f00;
}

Codepen: http://codepen.io/giannidk/pen/Bzkkaj?editors=1001

Upvotes: 0

developer033

Reputation: 24864

As mentioned in Gonzalo's answer, "you should be add attribute name to the inputs that you want validate".

After it, you can use ngMessages to validate your inputs.

Here's a snippet working:

var app = angular.module('app', ['ngMessages']);

app.controller('mainCtrl', function ($scope) {
  // Any JS code.
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" ></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>     
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>      
  <script src="https://code.angularjs.org/1.4.9/angular-messages.js"></script>        
</head>

<body ng-controller="mainCtrl">
  <form role="form" name="form" novalidate>
     <div class="form-group" ng-class="{ 'has-error' : form.nome.$touched && form.nome.$invalid }">
        <div class="row">
          <div class="col-lg-12">
            <div class="col-lg-6">
              <div class="form-group">
                <label>Nome</label>
                <input name="nome" class="form-control" placeholder="Nome da empresa" ng-model="empresa.nome" required="" />
              </div>
              <div class="help-block" ng-messages="form.nome.$error" ng-if="form.nome.$touched">
                <!-- <div ng-messages-include="error-messages.html"></div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : form.cnpj.$touched && form.cnpj.$invalid }">
        <label>CNPJ</label>
        <input id="cnpj" name="cnpj" class="form-control" placeholder="Entre com o CNPJ" ng-model="empresa.cnpj" required="" />
        <div class="help-block" ng-messages="form.cnpj.$error" ng-if="form.cnpj.$touched">
          <!-- <div ng-messages-include="error-messages.html"></div> -->
        </div>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : form.end.$touched && form.end.$invalid }">
        <label>Endereço</label>
        <input name="end" class="form-control" placeholder="Entre com o endereço pela empresa" ng-model="empresa.endereco" required="" />
        <div class="help-block" ng-messages="form.end.$error" ng-if="form.end.$touched">
          <!-- <div ng-messages-include="error-messages.html"></div> -->
        </div>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : form.email.$touched && form.email.$invalid }">
        <label>Email</label>
        <input type="email" name="email" class="form-control" placeholder="Email da empresa" ng-model="empresa.email" />
        <div class="help-block" ng-messages="form.email.$error" ng-if="form.email.$touched">
          <!-- <div ng-messages-include="error-messages.html"></div> -->
        </div>
      </div>
      <div class="col-lg-6" ng-class="{ 'has-error' : form.resp.$touched && form.resp.$invalid }">
        <div class="form-group">
          <label>Nome do Responsável</label>
          <input name="resp" class="form-control" placeholder="Nome do responsável da empresa" ng-model="empresa.nomeResponsavel" required="" />
          <div class="help-block" ng-messages="form.resp.$error" ng-if="form.resp.$touched">
            <!-- <div ng-messages-include="error-messages.html"></div> -->
          </div>
        </div>
        <div class="form-group" ng-class="{ 'has-error' : form.fixo.$touched && form.fixo.$invalid }">
          <label>Telefone</label>
          <input name="fixo" class="form-control" id="telefone" placeholder="Telefone fixo" ng-model="empresa.telefone" required="" />
          <div class="help-block" ng-messages="form.fixo.$error" ng-if="form.fixo.$touched">
            <!-- <div ng-messages-include="error-messages.html"></div> -->
          </div>
        </div>
        <div class="form-group" ng-class="{ 'has-error' : form.celular.$touched && form.celular.$invalid }">
          <label>Celular</label>
          <input name="celular" class="form-control" id="celular" ng-model="empresa.celular" placeholder="Telefone celular" />
          <div class="help-block" ng-messages="form.celular.$error" ng-if="form.celular.$touched">
            <!-- <div ng-messages-include="error-messages.html"></div> -->
          </div>
        </div>
        <div class="form-group" ng-class="{ 'has-error' : form.data.$touched && form.data.$invalid }">
          <label>Data de Vencimento</label>
          <input name="data" class="form-control" ng-model="empresa.dataVencimentoMensalidade" placeholder="Data de Vencimento da Mensalidade" />
          <div class="help-block" ng-messages="form.data.$error" ng-if="form.data.$touched">
            <!-- <div ng-messages-include="error-messages.html"></div> -->
          </div>
        </div>
        <div class="form-group">
          <input type="submit" name="commit" value="Criar empresa" class="btn btn-primary" ng-disabled="form.$invalid">
          <a class="btn btn-default" href="#">Cancelar</a>
        </div>
    </div>
  </form>
</body>

</html>

I would recommend you to check this tutorial also.

PS: As you may have noticed I commented all the "ng-include" (which contains the file that contains all the messages to show when input is invalid) that I put, because I don't know even if is possible to add a new "file" here in snippet, but I'm posting here almost the complete code and you can check the complete here.

error-messages.html:

<p ng-message="required">This field is required</p>
<p ng-message="minlength">This field is too short</p>
<p ng-message="maxlength">This field is too long</p>
<p ng-message="required">This field is required</p>
<p ng-message="email">This needs to be a valid email</p>

I hope it helps!!

Upvotes: 1

Gonzalo Pincheira Arancibia

Reputation: 3613

Firstly, you should be add attribute name to the inputs that you want validate. Then In the controller, more specifically in the $scope object, you have available a key with the name of your form, and inside this, keys associated to each input that you added a name attrubute.

Example based in your html:

angular
     .module('exampleApp')
     .controller('ExampleController', Controller);
    Controller.$inject = ['$scope'];
    function Controller($scope){
        var vm = this;
        var theForm = $scope.cadastroEmpresa;
        console.log(theForm);


        vm.handleValidation = function(){
          var theForm = $scope.cadastroEmpresa;
          console.log($scope);
          console.log($scope.cadastroEmpresa);
        }
    }

Working http://codepen.io/gpincheiraa/pen/GqEmNP

Upvotes: 1

Shashank Agrawal

Reputation: 25797

Form validation works when automatically when you submit the form. So you should add a submit type button anywhere inside the form like:

<button type="submit" class="btn btn-primary">Submit data</button>

And if you now require proper validation message and if you are using Bootstrap library, you can check out this library to provide validation messages in Angular with Bootstrap.

Upvotes: 0

Validate with AngularJS

Answers (4)

Related Questions