javascript - dotnetnuke 7 开发模块中的 AngularJS 表单

Question

我正在使用 AngularJS 开发一个 dotnetnuke 7 模块。 这是我在 View.ascx 中的代码:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
    var app = angular.module('myApp', []);
    app.controller('validateCtrl', function ($scope) {
        $scope.user = 'John Doe';
        $scope.email = 'john.doe@gmail.com';
    });
</script>

代码是从 W3School 复制的，但 AngularJS 似乎运行不佳。这是我的 View 的屏幕截图:

我尝试了一个 AngularSJ 简单示例，它运行良好，喜欢:

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

为什么我的第一段代码不起作用？我的模块中的“form”标签是否存在任何问题？

Answer 1

问题是 DNN 已经包含了 <form>标签(通过 Default.aspx)，并且不允许嵌套表单标签。

解决方案是使用 <ng-form>作为替代品。例如:

...
<div ng-app="myApp" ng-controller="validateCtrl">
  <ng-form name="myForm">
    <p>Username:
      <input type="text" name="user" ng-model="user" required>
      <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
        <span ng-show="myForm.user.$error.required">Username is required.</span>
      </span>
    </p>
    <p>
      <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
    </p>
  </ng-form>
</div>
...

此外，您需要关闭 HTML 5 默认表单验证，因为您使用的是 Angular 验证方法(此查询适用于 DNN):

$(function() {
  $('#Form').attr('novalidate', 'novalidate');
});

进一步阅读:

ngForm directive在 AngularJS 文档中

Forms : AngularJS 官方文档有更好的例子

请注意，W3School 示例不使用最佳实践，并且会为没有经验的人引入坏习惯(具体来说，它不包含 ng-model 中的“.”，这有助于避免潜在的父/子范围问题)轨道。请参阅链接中的表单示例以获得更可靠的方法。)