В чем разница между required и ng-required?

В чем разница между required и ng-required (проверка формы)?


person TidharPeer    schedule 20.05.2013    source источник


Ответы (3)


Элементы формы AngularJS ищут атрибут required для выполнения функций проверки. ng-required позволяет вам установить атрибут required в зависимости от логического теста (например, требуется только поле B - скажем, номер студента - если поле A имеет определенное значение - если вы выбрали "студент" на выбор)

Например, <input required> и <input ng-required="true"> по сути одно и то же.

Если вам интересно, почему это так (а не просто сделать <input required="true"> или <input required="false">), это связано с ограничениями HTML — атрибут required не имеет связанного значения — его простое присутствие означает (как в соответствии со стандартами HTML), что элемент требуется, поэтому angular нужен способ установить/отменить требуемое значение (required="false" будет недопустимым HTML)

person Tiago Roldão    schedule 20.05.2013
comment
Как я могу удалить ng-required соответственно? Потому что я безуспешно пробовал некоторые методы jquery - person themhz; 03.09.2013
comment
Я не уверен, что понимаю вопрос. На практике вы никогда не используете ng-required=true, а скорее ng-required=scopedVariable или ng-required=scopeTruthTest(), и значение переменной/функции определяет, будет ли элемент обязателен. Никогда не используйте jquery, чтобы возиться с этими вещами в угловом приложении, иначе вы получите непредсказуемые результаты! - person Tiago Roldão; 03.09.2013
comment
Стоит отметить, что ng-required отображает сообщение об ошибке в стиле всплывающей подсказки по умолчанию, говорящее «это поле обязательно», что не всегда желательно. ищу способ отключить - person Adam Spence; 13.03.2014
comment
На самом деле это не так. Не уверен, но я думаю, что вы имеете в виду проверку html5, которая выполняется автоматически большинством современных браузеров. Если вы хотите взять это под свой контроль (отключить то, что делает браузер), вы можете добавить атрибут novalidate: <form method="post" action="/foo" novalidate>. Опять же, это атрибут html5, не связанный с angularJS. - person Tiago Roldão; 15.03.2014
comment
Я ожидал, что когда ng-required указывает на переменную области/контроллера, Angular отслеживает ее изменения и соответственно устанавливает требуемый атрибут. В то время как в случае с простым атрибутом HTML required у вас нет такой гибкости. Нет? И раз уж мы затронули одну и ту же тему, что насчет ng-attr-required? Это точно так же, как ng-required? - person AsGoodAsItGets; 05.04.2017

Я хотел бы сделать дополнение для ответа Тиаго:

Предположим, вы скрываете элемент с помощью ng-show и добавляете к нему атрибут required:

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

выдаст ошибку что-то вроде:

Недопустимый элемент управления формы с именем = '' не может быть сфокусирован

Это потому, что вы просто не можете наложить required проверку на hidden элементов. Использование ng-required упрощает условное применение необходимой проверки, что просто потрясающе!

person I_Debug_Everything    schedule 02.09.2014
comment
Определенно хороший совет, и вы также можете использовать ng-if вместо ng-show/ng-hide, чтобы обойти эту потенциальную проблему. - person jkjustjoshing; 30.06.2015
comment
Это должен быть принятый ответ. Если у вас есть скрытые элементы (ng-show = false), существует разница между ng-required = true и просто «требуется», как описано в этом ответе, и из-за этой разницы мы попали в горячую воду. - person Ivan Krivyakov; 08.09.2016

HTML-атрибут required="required" — это оператор, сообщающий браузеру, что это поле необходимо для того, чтобы форма была корректной. (required="required" — это форма XHTML, просто использование required эквивалентно)

Атрибут Angular ng-required="yourCondition" означает 'isRequired(yourCondition)' и устанавливает атрибут HTML динамически для вас в зависимости от вашего состояния.

Также обратите внимание, что версия HTML сбивает с толку, не возможно написать что-то условное, например required="true" или required="false", имеет значение только наличие атрибута (настоящее означает истинное)! В этом вам поможет Angular с ng-required.

person Christophe Roussy    schedule 15.12.2015
comment
Да, к сожалению, браузер не позволяет поставить true/false, возможно, это слишком технично... - person Christophe Roussy; 20.05.2016