Qual é a diferença entre required e ng-required?

278

Qual é a diferença entre requirede ng-required(validação de formulário)?

angularjs required TidharPeer
fonte

Respostas:

420

Os elementos do formulário AngularJS procuram o requiredatributo para executar funções de validação. ng-requiredpermite que você defina o requiredatributo dependendo de um teste booleano (por exemplo, exija apenas o campo B - digamos, um número de aluno - se o campo A tiver um determinado valor - se você tiver selecionado "aluno" como opção )

Como exemplo, <input required>e <input ng-required="true">são essencialmente a mesma coisa

Se você está se perguntando por que é dessa maneira (e não apenas make <input required="true">ou <input required="false">), é devido às limitações do HTML - o requiredatributo não tem valor associado - sua mera presença significa (conforme os padrões HTML) que o elemento é necessário - portanto, o angular precisa de uma maneira de definir / desabilitar o valor necessário ( required="false"seria HTML inválido)

Tiago Roldão
fonte
Como posso remover ng-required, respectivamente? Porque eu tentei alguns métodos jQuery com nenhum sucesso
themhz
28
Não sei se entendi a pergunta. Na prática, você nunca usa ng-required = "true", mas ng-required = "scopedVariable" ou ng-required = "scopeTruthTest ()" e o valor do A variável / função determina se o elemento é necessário. Nunca use jquery para mexer com essas coisas em um aplicativo angular, ou você terá resultados imprevisíveis!
Tiago Roldão 03/09
Vale ressaltar que ng-required exibe uma mensagem de erro no estilo de dica de ferramenta padrão dizendo 'este campo é obrigatório', o que nem sempre é desejado. Eu estou procurando uma maneira de desligá-lo
Adam Spence
2
Realmente não. Não tenho certeza, mas acho que você está se referindo à validação html5, que é pré-formada automaticamente pela maioria dos navegadores modernos. Se você quer ter controle sobre isso (desativando o que o navegador faz), você pode adicionar o novalidate atributo: <form method="post" action="/foo" novalidate>. Novamente, este é um atributo html5, não relacionado ao angularJS.
Tiago Roldão 14/03
Eu esperava que, quando ng-requiredaponta para uma variável de escopo / controlador, Angular a monitora quanto a alterações e define o atributo necessário de acordo. Enquanto no caso do requiredatributo HTML simples, você não tem esse tipo de flexibilidade. Não? E enquanto estamos no mesmo tópico, o que dizer ng-attr-required? É exatamente o mesmo que ng-required?
precisa saber é o seguinte
78

Gostaria de fazer um complemento para a resposta de tiago :

Suponha que você esteja ocultando um elemento usando ng-showe adicionando um requiredatributo ao mesmo:

<div ng-show="false">
    <input required name="something" ng-model="name"/>
</div>

irá lançar um erro algo como:

Um controle de formulário inválido com nome = '' não pode ser focalizado

Isso ocorre porque você simplesmente não pode impor requiredvalidação aos hiddenelementos. O uso ng-requiredfacilita a aplicação condicional da validação necessária, o que é incrível!

I_Debug_Everything
fonte
13
Definitivamente, é uma boa dica, e você também pode usar em ng-ifvez de ng-show/ ng-hidepara contornar esse possível problema.
jkjustjoshing
1
Essa deve ser a resposta aceita. Se você possui elementos ocultos (ng-show = "false"), existe uma diferença entre ng-required = "true" e apenas 'required' conforme descrito nesta resposta, e entramos em água quente por causa dessa diferença.
Ivan Krivyakov 08/09/16
17

O atributo HTML required="required" é uma declaração informando ao navegador que esse campo é necessário para que o formulário seja válido. ( required="required"é o formulário XHTML, apenas usar requiredé equivalente)

O atributo Angular ng-required="yourCondition" significa 'isRequired (yourCondition)' e define o atributo HTML dinamicamente para você, dependendo da sua condição.

Observe também que a versão HTML é confuso , é não possível escrever algo condicional como required="true"ou required="false", apenas a presença dos assuntos de atributos (meios presentes verdade)! É aqui que o Angular ajuda você ng-required.

Christophe Roussy
fonte
Sim, infelizmente, o navegador não permite colocar verdadeiro / falso, provavelmente considerado muito técnico ...
Christophe Roussy