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.