为什么在AngullarJs验证中需要name属性

Question

朋友们，我是angularjs的新手，请解释为什么angularjs验证需要name属性

<form  name="lform" novalidate>
<input type="text"  name="userName" ng-model="userName" required novalidate/>
<span style="color:red" ng-show="lform.userName.$dirty && lform.userName.$invalid">
<span ng-show="lform.userName.$error.required">Username is required.</span>
</span>
<br/>
</form>

如果我删除name =“userName”代码不起作用，请解释一下。

Update: If I remove "ng-model" it is not working, but I can change "ngmodel='newName'" is working, please explain this reason also.

Answer 1

这就是HTML表单的工作原理，name描述了将发送到服务器的参数。

Angular的方法是扩展HTML及其行为，而不是发明轮子。 Angular封装“form”（参见ngForm指令）并对其进行扩展。 因为name是表单中输入的唯一ID，所以它也是ngForm集合中输入的唯一ID。

ng-model是另一个将输入值绑定到当前作用域中的变量的指令，它不必与name保持相同的值。

让我们举个例子来改变ng-model：

<form  name="lform" novalidate>
<input type="text"  name="userName" ng-model="object.name" required novalidate/>
<span style="color:red" ng-show="lform.userName.$dirty && lform.userName.$invalid">
<span ng-show="lform.userName.$error.required">Username is required.</span>
</span>
<br/>
</form>

验证将起作用，但将在您的范围内更新的变量是“object.name”。

总结一下，lform.userName保存元数据，object.name将保存实际数据。

Answer 2

答案在你的代码中。

<span ng-show="lform.userName.$error.required">Username is required.</span>

Angular使用输入名称来存储与错误相关的信息。

lform - 您的表单名称
用户名 - 您的输入名称