4

Tenho um input que desejo validar via AngularJS. Porém esse input não está dentro de um formulário. Por isso, ao tentar acessar as informações de validação do formulário, não obtive sucesso:

<div class="form-group">
    <input name="nick" type="text" class="form-control" ng-model="username.nick" ng-maxlength="10">
    <span class="help-block" ng-show="nick.$error.maxlength">Máximo permitido é 10</span>
</div>

Porém se eu fizer dessa forma, funciona:

<form name="formUser">
    <div class="form-group">
        <input name="nick" type="text" class="form-control" ng-model="username.nick" ng-maxlength="10">
        <span class="help-block" ng-show="formUser.nick.$error.maxlength">Máximo permitido é 10</span>
    </div>
</form>

Nesse caso específico, gostaria de usar a validação semelhante ao segundo exemplo, porém sem formulário.

Existe alguma forma de fazer a validação do angular, sem o uso do formulário?

3

1 Resposta 1

5

O que você pode fazer é usar a diretiva ng-form. Desta forma, poderia ficar assim:

<div class="form-group" ng-form="nick">
    <input name="nick" type="text" class="form-control" ng-model="username.nick" ng-maxlength="10">
    <span class="help-block" ng-show="nick.$error.maxlength">Máximo permitido é 10</span>
</div>

Essa Diretiva possui todas as capacidades do form com name, porém ele é mais utilizado em sub grupos. Já vi bastante em form wizard que possui vários steps (passos). Aí, em vez de utilizar vários formulários, eles usam o ng-form em etapas que precisam de validação.

Exemplo

6
  • O que essa diretiva faz? Magia? 11/08/2016 às 18:05
  • Não sei se é algum erro no meu código, mas parece que tem que ter o name onde está o ng-form. 11/08/2016 às 18:10
  • coloca assim ng-form="nick", que no caso é o nome do seu form 11/08/2016 às 18:11
  • 1
    Gabriel, testado! É isso mesmo. Vou botar o exemplo aqui, se quiser botar na resposta, fique a vontade +1 11/08/2016 às 18:17
  • 1
    jsfiddle.net/ny8eLxr8/78 11/08/2016 às 18:18

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 .