1

朋友，我是 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.
4

2 回答 2

2

这就是 HTML 表单的工作方式，名称描述了将发送到服务器的参数。

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

ng-model 是另一个将输入值绑定到当前范围内的变量的指令，它不必与名称保持相同的值。

让我们以您的示例为例并更改 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 保存实际数据。

于 2014-10-26T12:16:22.150 回答
1

答案在您的代码中。

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

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

lform – 您的表单名称
username – 您的输入名称

于 2014-10-26T12:14:29.787 回答