William Cézar William Cézar - 5 months ago 37
AngularJS Question

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.

Answer

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

Comments