ti-enxame.com

Como posso simplificar a validação de formulário?

O código abaixo parece funcionar muito bem para fazer a validação do formulário básico necessário. 

O formulário exibe um vermelho O nome é obrigatório mensagem quando o campo está sujo + inválido e um Ótimo! message se o campo estiver sujo + válido.

Mas é uma bagunça repetir esse código para cada campo no formulário:

<form name="myForm">
    <div class="control-group" 
     ng-class="{error: myForm.name.$invalid && myForm.name.$dirty}">
        <label>Name:</label>
        <input type="text" name="name" ng-model="user.name" required/>
        <span ng-show="myForm.name.$invalid && myForm.name.$dirty" 
            class="help-inline">Name is required</span>
        <span ng-show="myForm.names.$valid && myForm.names.$dirty">Great!</span>
    </div>
</form>

Eu gostaria de poder especificar os atributos ng-show e ng-class de alguma maneira mais fácil.

28
Martin Wickman

Uma maneira de fazer é abstrair sua expressão de validação para os métodos de escopo:

PLUNKER

HTML

<div class="control-group" ng-class="{error: isInvalid('name')}">
  <label>Name:</label>
  <input type="text" name="name" placeholder="Name" ng-model="user.name" required/>
  <span ng-show="isInvalid('name')" class="help-inline">Name is required</span>
  <span ng-show="isValid('name')">Great!</span>
</div>

Controlador

function Ctrl($scope) {
  $scope.isInvalid = function(field){
    return $scope.myForm[field].$invalid && $scope.myForm[field].$dirty;
  };

  $scope.isValid = function(field){
    return $scope.myForm[field].$valid && $scope.myForm[field].$dirty;
  };

}
35
Stewie

Eu sei que a questão é antiga, mas eu quero compartilhar com o mundo minha nova e incrível diretriz angular, eu fiz um projeto no Github e acho que é só comparar com o que quer que seja/estava disponível ... Eu me baseei no excelente Laravel PHP Framework e disponibilizado em Angular ... Bastante dito, vamos dar alguns exemplos:

<!-- example 1 -->
<label for="input1">Simple Integer</label>
<input type="text" validation="integer|required" ng-model="form1.input1" name="input1" />

<!-- example 2 -->
<label for="input2">Alphanumeric + Exact(3) + required</label>
<input type="text" validation="alpha|exact_len:3|required" ng-model="form1.input2" name="input2" />

Então eu posso definir qualquer quantidade de regras de validação que eu quero em uma simples diretiva validation="min_len:2|max_len:10|required|integer" e a mensagem de erro sempre será exibida no próximo <span> Vocês já não gostam? 1 linha de código para sua entrada, 1 linha de código para a exibição de erro você não pode ser mais simples do que isso ... oh e eu ainda apoio o seu Regex personalizado se você quiser adicionar :)

Não há mais formulários em cluster com 10 linhas de código para 1 entrada quando a única coisa que você precisa é de 2 linhas, não mais, mesmo para uma entrada com 5 validadores. E não se preocupe com a forma de não se tornar inválida, eu cuidei disso também, tudo é tratado do jeito bom.

Dê uma olhada no meu projeto Github Angular-Validation e espalhe a palavra =)

EDITAR
Para tornar a experiência do usuário ainda mais suave, adicionei a validação no timer. O conceito é simples, não incomodar o usuário enquanto ele estiver ocupado digitando, mas valide se ele fizer uma pausa ou alterar a entrada (onBlur) ... Adorei !!!
Você pode até mesmo personalizar o cronômetro conforme o seu gosto, eu decidi por padrão para 1 segundo dentro da diretiva, mas se você quiser personalizar você pode chamar como por exemplo typing-limit="5000" para fazer um 5 seg. tempo esgotado. Exemplo completo:

<input type="text" validation="integer|required" typing-limit="5000" ng-model="form1.input1" name="input1" />


EDITAR # 2
Também adicionado validação de confirmação de correspondência de entrada (ex .: confirmação de senha), aqui está um exemplo de código

<!-- input match confirmation, as for example: password confirmation -->
<label for="input4">Password</label>
<input type="password" name="input4" ng-model="form1.input4" validation="alpha|min_len:4|required"  />
<label for="input4c">Password Confirmation</label>
<input type="password" name="input4c" ng-model="form1.input4c" validation="match:form1.input4,Password|required"  />

EDIT # 3
Refatorou a diretiva de modo que o requisito de ter um <span> para exibir o erro é desnecessário, a diretiva agora lida com ela sozinha, veja a mudança de código refletida no topo.

DEMO
Adicionada uma demonstração ao vivo em Plunker

8
ghiscoding

Por favor, use este CSS

.myForm input.ng-invalid.ng-dirty {
    background-color: #FA787E;
}

.myForm input.ng-valid.ng-dirty {
    background-color: #78FA89;
}
5
user1029125

Você pode usar Angular-Validator .

Será

  1. Exibe a mensagem de erro requerida em vermelho (opcionalmente com classes de bootstrap)
  2. Marcar o campo como inválido se não passar no validador
  3. Impedir que o formulário seja enviado enquanto é inválido
  4. Mostrar apenas a mensagem se o campo estiver sujo
  5. Limpe seu código!

Não vai

  1. Exibe a mensagem de sucesso (o suporte para mensagens de sucesso está chegando em breve). 

Exemplo

<form name="myForm" angular-validator>
    <div class="control-group">
        <label>Name:</label>
        <input type="text" 
               name="name"
               ng-model="user.name"
               required-message="'Name is required'"
               required/>
    </div>
</form>

Uma solução para mostrar a mensagem de sucesso:

<form name="myForm" angular-validator>
    <div class="control-group">
        <label>Name:</label>
        <input type="text" 
               name="name"
               ng-model="user.name"
               required-message="'Name is required'"
               required/>
        <span ng-show="myForm.names.$valid && myForm.names.$dirty">Great!</span>
    </div>
</form>

Confira mais Casos de uso e exemplos do uso do validador angular .

Disclaimer: Eu sou o autor do Angular-Validator

4
user3920706

Existe uma diretiva angular/projeto no github chamado xtForm . Parece que é um bom começo para simplesmente a validação de campo angular. O XtForm reduz a quantidade de marcação de mensagem de validação após suas tags de entrada. 

Link para site de demonstraçãohttps://github.com/refactorthis/xtform

exemplo de uso pequeno. Nenhuma marcação extra (ng-show em extensões) necessária para obter este campo é necessária mensagem de erro/dica de ferramenta. 

<form xt-form novalidate>
  <input name="email" ng-model="modelVal" xt-validate required>
  <button type="submit">Submit</button>
</form>
3
Matthew Payne

Considere o uso deste módulo ngValidate no qual tenho trabalhado.

<input name="demo-field-1" ng-model="user.name" ng-validate="customStrategy">

A diretiva adicionará um intervalo para conter suas mensagens de erro. Você pode definir estratégias de validação personalizadas e mensagens de erro individuais.

ngValidateFactory.strategies.customStrategy = [
{
    value:ngValidate.required;
    message:"This field is required"
},
{
    value:[ngValidate.minLength,8];
    message:"Minimum 8 characters are required"
},
{
    value:[myFunction,arg1,arg2];
    message:"This field fails my custom function test"
}]

demo plnkr

1
RijulB

Provavelmente estou muito atrasado para a questão, mas você poderia usar uma biblioteca externa para lidar com a validação para você. Angular validador de formulário (escrito por mim) torna mais fácil por ter alguns validadores padrão no local, como 

  1. Requeridos
  2. String (min/max length)
  3. Número (valor min/max)
  4. Padronizar 
  5. O email
  6. URL
  7. Igual a (para verificação de email/senhas)
  8. Personalizado (onde você pode conectar sua própria validação)

E permite combinar vários validadores para um campo.

<form name="introform" ng-controller="intro">
    <div class="form-group" validator="required['Field is required'],string[5,20,'Should between 5 and 20 characters']">
        <label for="requiredField">Required Field</label>
        <input type="text" class="form-control" id="requiredField" name="requiredField"
               placeholder="Required Field" ng-model="model.requiredField">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>
0
Low Flying Pelican

Confira minha validação de formulário angularJS em codpen link

Mostrei um exemplo de como validar o requerido, o minlength, o maxlength, o email, o caso da senha, confirmar a correspondência da senha na minha demonstração. 

Aqui está o código:

var myApp = angular.module('myApp',[]);
myApp.controller('mainController',['$scope', function($scope) {
	
}]);
myApp.directive('validConfirmPassword', function() {
	return {
		require:'ngModel',
		link: function(scope, elem, attrs, ctrl) {
			ctrl.$parsers.unshift(function(viewValue, $scope) {
				var noMatch = viewValue != scope.myForm.password.$viewValue;
				ctrl.$setValidity('noMatch', !noMatch)
			})
		}
	}
})	
.content{ margin-top:50px;  }
.danger-text { color: red; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="#">AngularJS Form Validation</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    </nav>

	<div class="container content" ng-controller="mainController">
		<div class="row">
			<div class="col-sm-12">
				<form name="myForm" novalidate>
					<div class="row">
		    			<div class="col-md-6 mb-3">
							
								<label for="first_name">First Name</label>
								<input type="text" name="firstname" ng-model="firstname" id="firstname"  class="form-control" required>
								<p ng-show="myForm.firstname.$touched && myForm.firstname.$invalid" class="danger-text">Please enter your first name</p>	
							
						</div>
						<div class="col-md-6 mb-3">
							
								<label for="last_name">Last Name</label>
								<input type="text" name="last_name" ng-model="last_name" id="last_name"  class="form-control"  required>
								<p ng-show="myForm.last_name.$invalid && myForm.last_name.$touched" class="danger-text">Please enter your last name</p>
							
						</div>
					</div> <!-- End of row -->
					<div class="row">
						<div class="col-md-6 mb-3">
							<label for="username">Username</label>
							<input type="text" name="username" id="username" ng-model="username" class="form-control" ng-required="true" ng-minlength="4" ng-maxlength="10" >
							<p ng-show="myForm.username.$error.required && myForm.username.$touched" class="danger-text">Please enter username</p>
							<p ng-show="myForm.username.$error.minlength" class="danger-text">Username is too short</p>
							<p ng-show="myForm.username.$error.maxlength" class="danger-text">Username is too long</p>
						</div>
						<div class="col-md-6 mb-3">
							<label for="email">Email</label>
							<input type="email" name="email" id="email" class="form-control" ng-model="email">
							<p ng-show="myForm.email.$invalid && !myForm.email.$pristine" class="danger-text">Enter a valid email address</p>
						</div>
					</div> <!-- ENd of row -->
					<div class="row">
						<div class="col-md-6 mb-3">
							<label for="password">Password</label>
							<input type="password" class="form-control" id="password" name="password" ng-model="password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" required  />
   <p class="danger-text" ng-show="myForm.password.$error.required && myForm.password.$touched">Password is required</p>
   <p class="danger-text" ng-show="!myForm.password.$error.required && (myForm.password.$error.minlength || myForm.password.$error.maxlength) && myForm.password.$dirty">Passwords must be between 8 and 20 characters.</p>
   <p class="danger-text" ng-show="!myForm.password.$error.required && !myForm.password.$error.minlength && !myForm.password.$error.maxlength && myForm.password.$error.pattern && myForm.password.$dirty">Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</p>
						</div> <!-- End of col md 6 -->
						<div class="col-md-6 mb-3">
							<label>Confirm Password</label>
							<input type="password" id="confirm_password" name="confirm_password" class="form-control" ng-model="confirm_password" valid-confirm-password required  />
   <p class="danger-text" ng-show="myForm.confirm_password.$error.required && myForm.confirm_password.$dirty">Please confirm your password.</p>
   <p class="danger-text" ng-show="!myForm.confirm_password.$error.required && myForm.confirm_password.$error.noMatch && myForm.password.$dirty">Passwords do not match.</p>
						</div>
					</div> <!-- ENd of row -->
					<div class="row">
						<div class="col-md-12">
							<button type="submit"  class="btn btn-primary">Submit</button>
						</div>
					</div>
				</form> <!-- End of form -->
			</div> <!-- End of col sm 12 -->
		</div> <!-- End of row -->
	</div> <!-- End of container -->
  </div>

0
Abhilash Narayan

Experimente este HTML:

<form name="myForm" ng-submit="submitForm()" novalidate>

            <!-- NAME -->
            <div class="form-group" ng-class="{'has-error' : myForm.name.$invalid && !myForm.name.$pristine }">
                <label>Client Name</label>
                <input type="email" name="email" class="form-control" ng-model="formValues.userName" required placeholder="User Name">
                <p ng-show="myForm.email.$invalid && !myForm.email.$pristine" class="error">Your email is required.</p>
            </div>


            <div class="form-group">
                <label >Password</label>
                <input type="password" name="formValues.password" class="form-control" placeholder="Password" ng-model="formValues.password" ng-maxlength="6" required>
            </div>
            <div class="form-group">
                <label>Confirm Password</label>
                <input type="password" name="formValues.confirmPassword"  class="form-control"  placeholder="Confirm Password" ng-model="formValues.confirmPassword" required>
                <span class="error" ng-if="formValues.confirmPassword" ng-show="formValues.password!=formValues.confirmPassword">password should not match</span>
            </div>

            <div class="form-group">
                <label>First Name</label>
                <input type="text" name="formValues.firstName"  class="form-control" placeholder="First Name" ng-model="formValues.firstName" ng-keyup="acceptAlphabets(formValues.firstName,$event)" required>
                <span class="error"  ng-show="myString">Accept only letters</span>
                <span class="error" ng-show="myStringLength">Accept only 50 characters</span>
            </div>

            <div class="form-group">
                <label>Last Name</label>
                <input type="text" name="formValues.larstName" class="form-control"  placeholder="Last Name" ng-model="formValues.larstName" required>

            </div>
            <div class="form-group">
                <label>Date Of Birth</label>
                <input type="text" name="formValues.dateOfBirth" class="form-control" id="exampleInputPassword1" placeholder="Date Of Birth" ng-model="formValues.dateOfBirth" ng-keyup="dateFun(formValues.dateOfBirth,$event)" required>
                <span class="error" ng-show="dateVal">Incorrect Format, should be MM/DD/YYYY</span>

            </div>

            <button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid" ng-model="formValues.submit">Submit</button>

        </form>
0
AAKANKSHA PATEL
<form ng-app="demoApp" ng-controller="validationCtrl" 
name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Your Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Your Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>

<p>Mobile:<br>
<input type="number" name="number" ng-model="number" required>
<span style="color:red" ng-show="myForm.number.$dirty && myForm.number.$invalid">
<span ng-show="myForm.number.$error.required">Your Phone is required.</span>
<span ng-show="myForm.number.$error.number">Invalid number.</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid || myForm.number.$dirty && myForm.number.$invalid">
</p>
</form>

<script>
//This is controller
var app = angular.module('demoApp', []);
app.controller('validationCtrl', function($scope) {
    $scope.user = 'angular';
    $scope.email = '[email protected]';
});
</script>
0
Jaydeep Gondaliya