Должен ли я устанавливать атрибут «name» параллельно «ng-model»?

Question

Можно ли установить атрибут имени для полей формы HTML, если установлен ng-model?

<input ng-model="form.email" name="email"'/> 

Answer 1

Модель ng и поданное имя - это две разные концепции. ng-model: сообщает AngularJs, какую модель/данные из модели вы будете использовать. имя: указывает браузеру имя поля. Указывает, что если у вас есть имя, у которого также есть идентификатор с тем же именем. То же самое происходит наоборот.

Как сказал cgee, у вас нет никакой пользы для использования имени, только если вы захотите в какой-то момент в будущем автоматизировать тестирование своего решения, когда вам также понадобится установить идентификатор.

Answer 2

Да, вам нужно указать элементы формы, если вы планируете использовать директивы валидации. В этом случае объекты статуса проверки (с данными об ошибках, $ valid/$ invalid/$ touched/$ dirty/$ pristine flags) регистрируются по имени соответствующего поля в объекте контроллера формы.

Итак, у вас есть преимущества, и в большинстве случаев вам действительно нужны поля, чтобы иметь имя.

Простой пример проверки:

<script src="https://code.angularjs.org/1.4.3/angular.js"></script> 
 
<script src="https://code.angularjs.org/1.4.3/angular-messages.js"></script> 
 

 
<div ng-app="demo" ng-controller="MainController"> 
 
    <form novalidate name="userForm"> 
 
    <input type="text" name="username" ng-model="username" required minlength="5"> 
 
    <div ng-messages="userForm.username.$error" style="color:brown" role="alert"> 
 
     <div ng-message="required">Username can't be empty.</div> 
 
     <div ng-message="minlength">Username should be at least 5 characters.</div> 
 
    </div> 
 
    <pre>{{ userForm.username.$error | json }}</pre> 
 
    </form> 
 
</div> 
 

 
<script> 
 
    angular.module('demo', ['ngMessages']).controller('MainController', function($scope) {}); 
 
</script>

Answer 3

Одним из потенциальных выгод является возможность Bind to the Form and Control State. Если вы введете имена внутри именованной формы, вы можете получить доступ к свойствам самой формы. Это включает в себя данные проверки.

Общепринятая вещь, которую я вижу, такая же (это с той же страницы угловой документации).

<form name="form" class="css-form" novalidate> 
    <div> 
    Size (integer 0 - 10): 
    <input type="number" ng-model="size" name="size" 
      min="0" max="10" integer />{{size}}<br /> 
    <span ng-show="form.size.$error.integer">The value is not a valid integer!</span> 
    <span ng-show="form.size.$error.min 
       || form.size.$error.max">The value must be in range 0 to 10!</span> 
    </div> 
</form> 

Это использует некоторые угловые (при условии, валидации min и max директивы). Затем он проверяет фактический объект $error самого элемента формы, чтобы отображать сообщения проверки.

Итак, если вы планируете взаимодействовать с вашей формой таким образом, важно называть вас формой и элементами управления.