3

Qual a diferença entre o $dirty vs $invalid no AngularJs? Para validações de formulários?

Por exemplo, quando o formulário vem em branco, o $invalid fica true, porém o $Dirty não fica. Qual a lógica deles?

1 Resposta 1

2

$dirty indica que o modelo foi modificado desde a inicialização do escopo.

$invalid indica que pelo menos um dos conteúdos dos elementos de interface não está passando pela validação. Neste caso o modelo-alvo continua inalterado até que o processo de validação seja finalizado com sucesso.

Um formulário em branco que contém um campo mandatório estará ao mesmo tempo $invalid == true e $dirty == false.

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

validationApp.controller('mainController', function($scope) {

    $scope.submitForm = function(isValid) {
        if (isValid) { 
            alert('Submetido com sucesso');
        }
    };
});
body     { padding-top:10px; }
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="validationApp" ng-controller="mainController">
<div class="container">
    
    <!-- PAGE HEADER -->
    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
        <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
            <label>Nome Completo*</label>
            <input type="text" name="Nome" class="form-control" ng-model="user.name" required>
            <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">Seu nome é mandatório.</p>
        </div>
        
        <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
            <label>Nome de usuário</label>
            <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
            <p ng-show="userForm.username.$error.minlength" class="help-block">Nome de usuário muito curto.</p>
            <p ng-show="userForm.username.$error.maxlength" class="help-block">Nome de usuário muito longo.</p>
        </div>
            
        <button type="submit" class="btn btn-primary">Enviar</button>
        
    </form>
    
    <div class="page-header"><h1>Validação</h1></div>
    
    <div class="row">
        <div class="col-xs-3">
            <h3>Form</h3>
            <table class="table table-bordered">
                <tbody>
                    <tr>
                        <td ng-class="{ success: userForm.$valid, danger: userForm.$invalid }">Valid</td>
                    </tr>
                    <tr>
                        <td ng-class="{ success: userForm.$pristine, danger: !userForm.$pristine }">Pristine</td>
                    </tr>
                    <tr>
                        <td ng-class="{ success: userForm.$dirty }">Dirty</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-xs-3">
            <h3>Nome Completo</h3>
            <table class="table table-bordered">
                <tbody>
                    <tr>
                        <td ng-class="{ success: userForm.name.$valid, danger: userForm.name.$invalid }">Valid</td>
                    </tr>
                    <tr>
                        <td ng-class="{ success: userForm.name.$pristine, danger: !userForm.name.$pristine }">Pristine</td>
                    </tr>
                    <tr>
                        <td ng-class="{ success: userForm.name.$dirty }">Dirty</td>
                    </tr>
                    <tr>
                        <td ng-class="{ success: userForm.name.$touched }">Touched</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-xs-3">
            <h3>Nome de Usuário</h3>
            <table class="table table-bordered">
                <tbody>
                    <tr>
                        <td ng-class="{ success: userForm.username.$valid, danger: userForm.username.$invalid }">Valid</td>
                    </tr>
                    <tr>
                        <td ng-class="{ success: userForm.username.$pristine, danger: !userForm.username.$pristine }">Pristine</td>
                    </tr>
                    <tr>
                        <td ng-class="{ success: userForm.username.$dirty }">Dirty</td>
                    </tr>
                    <tr>
                        <td ng-class="{ success: userForm.username.$touched }">Touched</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
</div>
</body>

Exemplo adaptado deste link.

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 .