Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Objeto required não sendo lido pelo angular

Utilizando o html abaixo, a validação a ser feita com o campo required não reflete no campo "título". Ao carregar a página com o campo vazio, o span não é exbido.

<div class="page-header text-center">
    <h1>{{foto.titulo}}</h1>
</div>

<form novalidate name="formulario" class="row" ng-submit="submeter()">
    <div class="col-md-6">
        <div class="form-group">
            <label>Título</label>
            <input ng-model="foto.titulo" name="titulo" class="form-control" required>
            <span ng-show="formulario.titulo.$error.required" class="form-control alert-danger">
                Título obrigatório
            </span>
        </div>
        <div class="form-group">
            <label>URL</label>
            <input ng-model="foto.url" name="titulo" class="form-control">
        </div>
        <div class="form-group">
            <label>Descrição</label>
            <textarea ng-model="foto.descricao" name="descricao" class="form-control">
            </textarea>
        </div>

        <button type="submit" class="btn btn-primary">
            Salvar
        </button>
        <a href="/" class="btn btn-primary">Voltar</a>
        <hr>
    </div>
    <div class="col-md-6">
        <minha-foto url="{{foto.url}}" titulo="{{foto.titulo}}"></minha-foto>
    </div>
</form>

Fiz um teste para imprimir no log o valor de

formulario.titulo.$error.required

na submissão:

    $scope.submeter = function() {
        console.log($scope.formulario.$error.required);
    };

E o resultado foi:

[eg]

quando o campo estava vazio e

undefined

quando preenchido.

2 respostas

Adiantando, não sou especialista.. já usei o angular e estou só dando meu chute.

Opa, na hora da impressão não faltou referenciar o título? Outro detalhe, o span só vai aparecer depois de vc tentar submeter o formulário uma vez com o o campo vazio.. logo na hora de tentar carregar não tem porque ele aparecer, já que o usuário ainda não errou a entrada dos dados.

solução!

Oi Alberto. Obrigado pela resposta. Percebi que nomeei outro input também com o name="titulo". Daí creio que com isso o pre-processamento do Angular se perdeu na hora de verificar a condição required, que não existia no input descrito abaixo.

        <div class="form-group">
            <label>URL</label>
            <input ng-model="foto.url" name="titulo" class="form-control">
        </div>