Form field filled in, but given as $pristine

Asked

Viewed 217 times

2

I’m making a $http request, the return is a JSON, assigned to the model ($Scope.developer), but the field is still set to $pristine.

		Data.post('getElaborador', $rootScope.codigo, 'Listagens').then(
			function(success){
				$scope.elaborador = success;								
			}, function(error){
				console.log('Erro ao consulta informações do elaborador');
			});

    .state("perfil", {
        url: "/perfil",
        templateUrl: "views/profile/perfil.html",
        data: {pageTitle: 'Perfil de Usuário'},
        controller: "UserProfileController",
        resolve: {
            deps: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load({
                    name: 'MetronicApp',  
                    insertBefore: '#ng_load_plugins_before',
                    files: [
                    '../assets/global/plugins/angularjs/plugins/ui-select/select.min.css',
                    '../assets/global/plugins/angularjs/plugins/ui-select/select.min.js',

                    '../assets/pages/css/profile.css',
                    '../assets/js/angular-viacep.min.js',

                    'js/controllers/UserProfileController.js'
                    ]                    
                });
            }]
        }
    })
    // User Profile Dashboard
    .state("perfil.cadastro", {
        url: "/cadastro",
        templateUrl: "views/profile/elaborador.html",//onde esta o formulario
        data: {pageTitle: 'Perfil de Usuário'}
    })


<!-- perfil.html -->
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN PROFILE SIDEBAR -->
        <div class="profile-sidebar">
            <!-- PORTLET MAIN -->
            <div class="portlet light profile-sidebar-portlet">
                <!-- SIDEBAR USERPIC -->
                <div class="profile-userpic">
                    <img src="{{settings.assetsPath}}/pages/media/profile/profile_user.jpg" class="img-responsive" alt=""> </div>
                <!-- END SIDEBAR USERPIC -->
                <!-- SIDEBAR USER TITLE -->
                <div class="profile-usertitle">
                    <div class="profile-usertitle-name"> {{dados[0]}} </div>
                    <div class="profile-usertitle-job"> {{(dados[1]==1?'Elaborador':'Membro da Comissão')}} </div>
                </div>
                <!-- END SIDEBAR USER TITLE -->
                <!-- SIDEBAR BUTTONS -->
                <div class="profile-userbuttons">
                    <button type="button" class="btn btn-circle green-haze btn-sm">Follow</button>
                    <button type="button" class="btn btn-circle btn-danger btn-sm">Message</button>
                </div>
                <!-- END SIDEBAR BUTTONS ng-class="{active: $state.includes('profile.dashboard')}"-->
                <!-- SIDEBAR MENU -->
                <div class="profile-usermenu">
                    <ul class="nav">
                        <li ng-class="{active: $state.includes('perfil.cadastro')}">
                            <a ui-sref="perfil.cadastro">
                                <i class="fa fa-user" aria-hidden="true"></i> Cadastro </a>
                        </li>
                        <li ng-class="{active: $state.includes('perfil.formacao')}">
                            <a ui-sref="perfil.formacao">
                                <i class="fa fa-graduation-cap" aria-hidden="true"></i> Formação </a>
                        </li>
                    </ul>
                </div>
                <!-- END MENU -->
            </div>
            <!-- END PORTLET MAIN -->
            <!-- PORTLET MAIN -->
            <div class="portlet light">
              <!-- CAMPOS -->
            </div>
            <!-- END PORTLET MAIN -->
        </div>
        <!-- END BEGIN PROFILE SIDEBAR -->
        <!-- BEGIN PROFILE CONTENT -->
        <div ui-view class="profile-content fade-in-up"> </div>
        <!-- END PROFILE CONTENT -->
    </div>
</div>

//html developer.

<form name="elaboradorFrm" id="elaboradorFrm" data-toggle="validator" role="form" style="margin-top:20px;margin-right:5px;margin-left:5px;" autocomplete="off">
	<div id="dados-pessoais">
		<fieldset>
			<legend style="border-bottom: 1px dashed #f7dfd5;">Dados Pessoais</legend>					
			<div class="row">
				<div class="col-md-8">
					<div class="form-group {{elaboradorFrm.cadNome.$pristine ? '' : elaboradorFrm.cadNome.$invalid ? 'has-error' : 'has-success'}} has-feedback">
						<label for="cadNome">Nome <span>*</span></label>
						<input class="form-control" type="text" id="cadNome" name="cadNome" ng-model="elaborador.cadNome" ng-minlength="3" ng-required="true">
						<span class="glyphicon glyphicon-{{elaboradorFrm.cadNome.$invalid && elaboradorFrm.cadNome.$dirty ? 'remove' : elaboradorFrm.cadNome.$pristine ? '' : 'ok'}} form-control-feedback" aria-hidden="true"></span>
					</div>
				</div>
			</div>
		</fieldset>
	</div>
</form>

javascript angularjs rest

  • Assign the model inside the Success. Because ajax is asynchronous.

  • It is already inside the Success. The value is filled in on the page, but the field remains $pristine

1 answer

1

When programmatically assigning a value, use $setDirty() to remove pristine state from form.

Example:

Data.post('getElaborador', $rootScope.codigo, 'Listagens').then(
        function(success){
            $scope.elaborador = success;                                
            $scope.nomeDoFormulario.$setDirty();
        }, function(error){
            console.log('Erro ao consulta informações do elaborador');
        });

  • I made that trade

  • need to have something like $Scope.fileName declared in my controller?

  • @Reginaldomoura <form name="nomeDoFormulario">. As long as the form is declared inside the controller, the reference will be automatically added to $Scope.

  • What would $Scope look like.nameFormulario = (array? ,Object?)

  • @Reginaldomoura you do not declare the form reference. It is created automatically when you declare the element in view.

  • the form I am editing is in .state("perfil.cadastro,.., and I’m using the .state("perfil,.., there is some way to access this form yet?

  • @Reginaldomoura if you share or inherit hierarchically, yes. I suggest you add the HTML of the views used in both states (perfil.html, elaborador.html) to your question.

  • I was able to access the $Scope of the son var cs = $scope.$$childHead;&#xA;cs.elaboradorFrm.$setDirty();

  • @Reginaldomoura Oneliner: $scope.$$childHead.elaboradorFrm.$setDirty();. I’m glad it worked out for you!

Show 4 more comments

Browser other questions tagged javascript angularjs rest

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