我正在尝试实现基本的角度表单验证。我已经实现了相同的。但我很想知道,如果我不使用 ng-model,为什么它不起作用。
plunker的链接以显示相同的行为
我正在尝试实现基本的角度表单验证。我已经实现了相同的。但我很想知道,如果我不使用 ng-model,为什么它不起作用。
plunker的链接以显示相同的行为
ngModel
NgModelController
指令包含一个包含数据绑定、验证、CSS 更新以及值格式化和解析服务的实例。如果ngModel
它本身不存在,验证将不起作用。要使表单验证正常工作,您需要可以使用name
属性发布到范围的表单实例和表单输入控件 (ngModel)。来自 Angular 文档的以下描述解释说:
表单是 FormController 的一个实例。可以选择使用 name 属性将表单实例发布到范围中。
类似地,具有 ngModel 指令的输入控件包含 NgModelController 的实例。可以使用输入控件上的 name 属性将此类控件实例发布为表单实例的属性。name 属性指定表单实例上的属性名称。
这意味着表单和控件的内部状态都可用于使用标准绑定原语在视图中进行绑定。
这使我们可以使用以下功能扩展上述示例:
用户与控件交互后显示的自定义错误消息(即设置了 $touched 时) 提交表单时显示的自定义错误消息(设置了 $submitted),即使用户没有与控件交互
因为没有 ng-model,输入元素不会绑定到应用程序范围内的任何内容。
Angular 有自己的上下文模型。(范围或其他)如果您在 Angular 世界之外处理表单,表单无法从 Angular 的角度获取任何信息。
如果您不想使用 ng-model,请使用纯 javascript 验证方法。
ng-model="value"
定义该特定元素的值来自 Angular 的上下文。value
它在声明元素的范围内检查。例如,我们有onclick="call()"
和ng-click="call()"
方法。onclick
角度上下文之外的函数的事件ng-click
搜索,范围内的函数的事件搜索。
<div ng-app="app" ng-controller="Ctr" onclick="call()" ng-click="call()"></div>
<script>
function call(){
console.log('out of angular');
}
angualr.app('app', function($scope){
$scope.call = function(){console.log('insode angular')}
})
</script>
在上面的代码中,如果删除onclick
,则ng-click
打印“inside angular”,如果删除ng-click
,则onclick
打印out of angular
。如果两者都在那里,则两者都将被调用并打印。同样,如果您删除ng-model,您将失去对角度上下文中输入值的控制,并且 $error, $invalid 不知道要验证什么。