为什么 Angular 1 表单验证在没有 ng-model 的情况下不起作用

Question

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

Link plunker 显示相同的行为

Answer 1

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

Answer 2

Angular 有自己的上下文模型。（范围或其他东西）如果你在 Angular 世界之外对待表格，表格无法从 Angular 的角度获得任何信息。

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

Answer 3

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

A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.

Similarly, an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control. The name attribute specifies the name of the property on the form instance.

This implies that the internal state of both the form and the control is available for binding in the view using the standard binding primitives.

This allows us to extend the above example with these features:

Custom error message displayed after the user interacted with a control (i.e. when $touched is set) Custom error message displayed upon submitting the form ($submitted is set), even if the user didn't interact with a control

Answer 4

ng-model="value" 定义该特定元素的值来自 angular 的上下文。它在声明元素的范围内检查 value 。例如，我们有 onclick="call()" 和 ng-click="call()" 方法。 onclick 事件搜索 angular 上下文之外的函数，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上下文中input值的控制，$error,$invalid不知道是什么验证。

为什么 Angular 1 表单验证在没有 ng-model 的情况下不起作用

Why Angular 1 form validation not works without ng-model

angularjs

angularjs-forms