为什么在 AngularJs 验证中需要名称属性

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 表单的工作方式，名称描述了将发送到服务器的参数。

Angular 的方法是扩展 HTML 及其行为，而不是发明轮子。 Angular 封装了“表单”（参见 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 – 您的表单名称
用户名——你输入的名字