我们应该继续在AngularJS中使用表格吗？

Question

我们是否仍然在使用<form>元素时使用AngularJS双向数据绑定可以直接控制控制器中的表单数据？

我们是否应该使用表格来尊重HTML结构,或者还有其他一些原因我们应该继续使用它们？没有使用<form>元素的方法有什么缺点？

angular.module('formsOrNot', [])
    .controller('ExampleController', ['$scope', function($scope) {
      // Form example  
      $scope.list1 = [];
      $scope.submit1 = function() {
        if ($scope.text1) {
          $scope.list1.push(this.text1);
          $scope.text1 = '';
        }
      };
      // Without form
      $scope.list2 = [];
      $scope.submit2 = function() {
        if ($scope.text2) {
          $scope.list2.push(this.text2);
          $scope.text2 = '';
        }
      };  
    }]);

input.ng-invalid-required.ng-dirty, input.ng-invalid-email.ng-dirty {
  border: 1px solid red;
}

input.ng-invalid-required.ng-pristine, input.ng-invalid-email.ng-pristine {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="formsOrNot">
<div ng-controller="ExampleController">
    <header>
        <h1>Forms or not</h1>
    </header>
    
    <section>
        <h2>Form example</h2>
        <form ng-submit="submit1()" novalidate>
      Enter text and hit enter:
            <input type="email" ng-model="text1" name="text1" required/>
            <input type="submit" id="submit1" value="Submit" />
            <pre>list1={{list1}}</pre>
        </form>
    </section>

    <section>
        <h2>Without form</h2>
      Enter text and hit enter:
            <input type="email" ng-model="text2" name="text2" required/>
            <input type="submit" id="submit2" value="Submit" ng-click="submit2()"/>
            <pre>list2={{list2}}</pre>
    </section>
</div>
</div>

更新为@ZenDD的初始答案不正确的证据:

The two-way data binding works fine without form element, but without it you wont' be able to use benefits of Angular's built-in form validation- 不正确

尝试更新的代码段,它证明输入是经过验证的,而不是表单.无论是否有表单,验证类都会添加到这两个部分.

此外,unvalidate两个部分的效果相同,因为没有表单的部分不需要该属性.

所以验证不是重要的,对吗？

在@ZenDD更新他的答案后更新

我们仍然应该使用form元素作为Angular将它们视为Angular用于实例化的指令FormController.该控制器使我们能够在元素上使用验证属性 - 这使我们能够验证表单中包含的字段.这个属性显示在@ ZenDD对自己答案的更新中:$error, $pristine, $dirty

Answer 1

双向数据绑定在没有表单元素的情况下工作正常,但如果没有它,您将无法使用Angular的内置表单验证的好处,这是非常有用的东西.形式的Angular Docs.基本上要启用验证,您必须:

1. 使用具有以下所需属性的表单元素:name和novalidate;
2. 所有封闭的输入元素都应包含name和required属性;

然后Angular自动创建具有以下属性的对象:$ error,$ pristine,$ dirty等.您可以使用此对象来检查表单或输入元素的有效性.

UPDATE

同样,您在上面使用的是另一个Angular的功能 - CSS验证类.是的,他们工作得很好,即使没有form元素,当你使用特定的HTML5约束属性等中的一个被角自动生成的email,number,required等,这是可以使用这些类来检测一些错误,并创建用户具体的反馈,但在在这种情况下,您根本无法使用Javascript逻辑.这样的东西将无法使用:

<form name="myForm" novalidate>
  <input type="text" name="myInputOne" required/>
  <input type="email" name="myInputTwo" required/>
</form>
<div ng-show="myForm.$invalid && myForm.$dirty">
  <p>The following fields contain mistakes:</p>
  <span ng-show="myForm.myInputOne.$error.required">
    Please enter your name.
  </span>
  <span ng-show="myForm.myInputTwo.$error.required">
    Please enter your email.
  </span>
  <span ng-show="myForm.myInputTwo.$error.email">
    Your email is incorrect.
  </span>
</div>