为什么没有 ng-model Angular 1 表单验证不起作用答案

【问题标题】：Why Angular 1 form validation not works without ng-model为什么没有 ng-model Angular 1 表单验证不起作用
【发布时间】：2017-01-16 01:08:54
【问题描述】：

我正在尝试实现基本的角度表单验证。我已经实现了相同的。但我很想知道，如果我不使用 ng-model，为什么它不起作用。

plunker 的链接以显示相同的行为

【问题讨论】：

您可以使用纯 javascript 进行表单验证。

标签： angularjs angularjs-forms

【解决方案1】：

ngModel 指令包含NgModelController 的实例，其中包含用于数据绑定、验证、CSS 更新以及值格式化和解析的服务。如果ngModel 本身不存在，则验证将不起作用。要使表单验证正常工作，您需要可以使用name 属性和表单输入控件（ngModel）发布到范围的表单实例。 Angular 文档中的以下描述解释说：

表单是 FormController 的一个实例。表单实例可以可以选择使用 name 属性将其发布到作用域中。

类似地，具有 ngModel 指令的输入控件拥有一个 NgModelController 的实例。这样的控制实例可以是使用 name 属性作为表单实例的属性发布在输入控件上。 name 属性指定的名称表单实例上的属性。

这意味着表单和控件的内部状态可用于在视图中使用标准绑定进行绑定原语。

这允许我们用这些特性扩展上面的例子：

用户与某项交互后显示的自定义错误消息控制（即设置 $touched 时）显示自定义错误消息在提交表单时（设置了 $submitted），即使用户没有与控件交互

【讨论】：

【解决方案2】：

因为没有 ng-model，所以输入元素不会绑定到应用程序范围内的任何内容。

【讨论】：

【解决方案3】：

Angular 有自己的上下文模型。（范围或其他）如果您在 Angular 世界之外处理表单，表单无法从 Angular 的角度获取任何信息。

如果您不想使用 ng-model，请使用纯 javascript 验证方法。

【讨论】：

【解决方案4】：

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，你将失去对 Angular 上下文中输入值的控制，并且 $error, $invalid 不知道要验证什么。

【讨论】：