无法从 AngularJS 控制器内部访问表单

Question

我正在尝试从 AngularJS 控制器中手动重置表单，但我无法使用 $scope 或 controllerAs 访问它。当我登录 $scope.SupportForm 时，它 returns undefined.

HTML

<form name="supportForm" id="supportForm" novalidate> 
  
    <label for="message">Message</label>
    <textarea name="message" id="message" model="$ctrl.formData.message" maxlength="5000" required></textarea>   

     <button type="submit" data-ng-click="$ctrl.submitForm($ctrl.formData)" data-ng-disabled="supportForm.$invalid">              
         Request support
     </button>

</form>

控制器

function GeneralSupportController($scope, $state, $timeout, $stateParams, SupportService, $uibModal) {

    var vm = this;
    vm.formData = {};

    vm.submitForm = submitForm;

    function submitForm(data) {
         console.log('$scope.supportForm : ', $scope.supportForm)
    }
}

我也尝试过将 ngModel 添加到表单中，但它也不起作用。

问题

知道为什么表单没有分配给范围吗？

Answer 1

表单已分配给代码中的范围。（https://plnkr.co/edit/7eYvApaW36DrRmvK >> 它有效）我想你实际上有以下内容：

<div ng-if="...">
  <form name=...

在这种情况下，表单被分配给 ng 的嵌套范围 - 如果不是控制器范围。您有几种解决方案：

通过表单提交功能$ctrl.submitForm(supportForm...当你有多个表单时很有用
将表单放入控制器<form name="$ctrl.supportForm"当你有一个表单时就这样做

无法从 AngularJS 控制器内部访问表单

Can't access form from inside AngularJS controller

angularjs

controller