Angular validation

Asked

Viewed 78 times

0

I can’t use angular validations, ng-disable, ng-show, none of them work. By console

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/app/configRotas.js"></script>
    <script src="Scripts/app/services/clienteService.js"></script>
    <script src="Scripts/app/controllers/clienteController.js"></script>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="navbar-brand" href="#">O Que tem pra Hj?</div>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#cadastrar">Cadastre-se</a></li>
                <li><a href="#listacliente">Exibir todos clientes</a></li>
            </ul>
        </div>
    </div>


    <div ng-view></div>
</body>
</html>

html register.

<div ng-controller="clienteController">
    <form class="form-horizontal" novalidate name="cadastroForm">
        <div class="form-group">
            <label class="control-label col-sm-2">Nome:</label>
            <div class="col-sm-3">
                <input type="text" ng-model="Nome" class="form-control" required placeholder="digite seu nome">
            </div>

        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">Email:</label> 
            <div class="col-sm-3">
                <input type="email" ng-model="Email" ng-required="true" class="form-control" placeholder="digite seu email:"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">Senha: </label>
            <div class="col-sm-2">
                <input type="password" ng-model="Senha" class="form-control" />
            </div>
        </div>

    </form>

    <div ng-show="cadastroForm.Nome.$error.required" class="alert alert-danger">
        preencha o campo nome!
    </div>

    <div ng-show="cadastroForm.Email.$error.required && cadastroForm.$dirty">
        <p>preencha email!</p>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <input type="submit" ng-disable="cadastroForm.$invalid" ng-click="SalvarCliente(cliente)" class="btn btn-primary" value="salvar"/>
        </div>
    </div>

</div>
angularjs

2 answers

0

    <div ng-show="cadastroForm.Email.$error.required && cadastroForm.$dirty">
         <p>preencha email!</p>
    </div>

here you try to access the form field by ng-Model , but you must access the input name

<input type="text" ng-model="Nome" name="nome">

You put in ng-show instead of "Name", "name", which is the value assigned to name.

0

ng-model validates the input through its name in case your code would have to add the name in the input:

     <div class="col-sm-3">
            <input type="email" name="email" ng-model="Email" ng-required="true" 
            class="form-control" placeholder="digite seu email:"/>
        </div>

Using ng-messages, you don’t have to worry about whether the input has been changed or not (cadastroForm.Email. $error.required && cadastroForm. $Dirty).

    <div ng-messages="cadastroForm.Email.$error">
      <div ng-message="required">CPF/CNPJ é obrigatório</div>
   </div>

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.