What is the difference between $Dirty vs $invalid in Angularjs? For form validations?

Asked

Viewed 111 times

3

What is the difference between $Dirty vs $invalid in Angularjs? For form validations?

For example, when the form comes empty, the $invalid is true, but $Dirty is not. What is their logic?

angularjs

1 answer

2


$dirty indicates that the model has been modified since the scope initialization.

$invalid indicates that at least one of the contents of the interface elements is not going through validation. In this case the target model remains unchanged until the validation process is successfully completed.

A blank form containing a mandatory field will be at the same time $invalid == true and $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>

Adapted example of this link.

Browser other questions tagged angularjs

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