AngularJS:在对象中使用ControllerAs语法定位窗体

AngularJS: Target a form with Controller As syntax in an object

本文关键字：ControllerAs 语法 定位 窗体 对象 AngularJS      更新时间：2023-09-26

注意：我确实在SO上四处寻找解决方案，但没有人遇到函数位于对象中的额外问题。

我的Angular JS应用程序中有一个表单：

<div ng-app="plunker">
  <div ng-controller="PMTController as pmt">
   <form name="myForm">
    <div class="form-group">
     <input type="text" class="form-control" />
    </div>
    <button class="btn btn-primary" ng-click="pmt.search.resetSearchForm()">Reset</button>
   </form>
 </div>
</div>

此外，我有一个控制器和一个对象：

app.controller('PMTController', function($log) {
  var _this = this;
  _this.search = {
    resetSearchForm: function () {
     $log.debug('test');
     // how to target the form?
   }
 };
})

我的ng点击和log.debug一样有效。但是，再多的调整也无法针对表单，这样我就可以重置整个内容（清空所有字段）。

我可以做$window.myForm.reset();，但我怎么能从角度做到这一点呢？

请注意，我的主要问题是如何从search对象中的resetSearchForm函数内部正确定位表单。

注意：我尝试将表单名称更改为pmt.myForm或pmt.search.myForm，但没有成功。

我尝试了$setPristine和$setUntouched()，但它们似乎无法清除字段。

我知道我可以分配一个模型并将其分配给所有表单控件，但这是针对原型的，所以我宁愿做一个简单的重置。

我做了一支钢笔：https://codepen.io/smlombardi/pen/YWOPPq?editors=1011#0

以下是我对您的代码笔的看法，有望解决问题：

https://codepen.io/watsoncn/pen/YWOXqZ?editors=1011

说明：

Angular的文档提供了一个"表单重置"按钮的例子，但您可以在提交后应用相同的逻辑进行重置：

Documentation:https://docs.angularjs.org/guide/forms

与一个plunker：

Live Example:https://plnkr.co/edit/?p=preview

该示例显示了Angular的copy方法的使用，该方法创建了作为参数传递的任何内容的深度副本，并将其分配给放置在特定输入字段上的ng模型。在这种情况下，他们只是向它传递一个空的主对象。

您需要确保在输入中添加一个ng模型属性，然后创建一个重置函数，该函数可以在提交后运行。另一个常见的选项是在提交函数中将每个输入的ng模型简单地设置为空字符串，例如$scope.inputModel = ""

这就是你所希望的吗？我可能误解了这个问题。如果还有困惑的话，我会很乐意再试一试。

要在控制器中获取表单，您只需要这样命名表单：

<form name="pmt.myForm">

以下是完整的演示：

(function() {
  "use strict";
  angular
    .module('plunker', [])
    .controller('PMTController', PMTController);
  PMTController.$inject = ['$log'];
  function PMTController($log) {
    var _this = this;
    _this.model = {};
    
    _this.search = {
      resetSearchForm: function() {
        console.log(_this.myForm); // -> Form reference
        _this.model = {};
      }
    };
  }
})();
<!DOCTYPE html>
<html ng-app="plunker">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="PMTController as pmt">
  <div class="col-md-12">
    <form name="pmt.myForm">
      <div class="form-group">
        <input type="text" ng-model="pmt.model.example" class="form-control" />
        <input type="text" ng-model="pmt.model.example2" class="form-control" />
        <input type="text" ng-model="pmt.model.example3" class="form-control" />
      </div>
      <button class="btn btn-primary" ng-click="pmt.search.resetSearchForm()">Reset</button>
    </form>
    <hr> All fields:
    <pre ng-bind="pmt.model | json"></pre>
  </div>
</body>
</html>

相关文章：