我可以访问控制器中的表单吗?



我目前正在使用以下方法。

$scope.$$childHead.customerForm[firstName] ,以便:

<form name="customerForm">
  <input type="text" name="firstName" 
         ng-model="data.customer.firstName" 
         tabindex="1"  
         ng-disabled="!data.editable" 
         validationcustomer />
</form>

但这仅适用于Chrome。现在我尝试了以下方法:

$scope.editCustomerForm[firstName] ,以便:

<form name="customerForm" ng-model="editCustomerForm">
  <input type="text" name="firstName" 
         ng-model="data.customer.firstName" tabindex="1"  
         ng-disabled="!data.editable" 
         validationcustomer />
</form>

这行不通。请注意,我的表单位于"基础"选项卡中。如何访问firstName

编辑:当form位于基础选项卡中时,它似乎没有添加到scope中。

有人对此有解决方案吗?

无法访问输入的原因是"基础"选项卡(或ng-repeat?)创建了一个隔离范围。解决此问题的一种方法是使用控制器作为语法:

<div ng-controller="MyController as ctrl">
<!-- an example of a directive that would create an isolate scope -->
<div ng-if="true">
<form name="ctrl.myForm">
    ...inputs
    Dirty? {{ctrl.myForm.$dirty}}
    <button ng-click="ctrl.saveChanges()">Save</button>
</form>
</div>
</div>

然后,您可以在代码中访问FormController,例如:

function MyController () {
    var vm = this;
    vm.saveChanges = saveChanges;
    function saveChanges() {
       if(vm.myForm.$valid) { 
            // Save to db or whatever.
            vm.myForm.$setPristine();
       }
}

您可以将表单附加到父控制器中定义的某个对象。然后,您甚至可以从子范围访问表单。

父控制器

$scope.forms = {};

子作用域中的某些模板

<form name="forms.form1">
</form>

问题是,在执行控制器中的编码时,不必定义表单。所以你必须做这样的事情

$scope.$watch('forms.form1', function(form) {
  if(form) {
    // your code...
  }
});

如果要将表单传递给控制器以进行验证,只需将其作为参数传递给处理提交的方法即可。使用表单名称,因此对于原始问题,它将如下所示:

<button ng-click="submit(customerForm)">Save</button>

答案有点晚了,但带有以下选项。它对我有用,但不确定它是否正确。

在我看来,我正在这样做:

<form name="formName">
    <div ng-init="setForm(formName);"></div>
</form>

在控制器中:

$scope.setForm = function (form) {
    $scope.myForm = form;
}
现在,完成

此操作后,我的控制器变量中得到了我的表单,该变量$scope.myForm

为了能够访问控制器中的窗体,必须将其添加到虚拟范围对象中。

$scope.dummy = {}

对于您的情况,这意味着:

<form name="dummy.customerForm">

在控制器中,您将能够通过以下方式访问表单:

$scope.dummy.customerForm

你将能够做这样的事情

$scope.dummy.customerForm.$setPristine()

维基链接

在您的模型中使用"."将确保原型继承 在玩。所以,使用<input type="text" ng-model="someObj.prop1">而不是 比<input type="text" ng-model="prop1">

如果您确实想要/需要使用原语,有两种解决方法:

1.在子作用域中使用$parent.parentScopeProperty。这将防止 子范围从创建自己的属性。2.定义一个函数 父作用域,并从子作用域调用它,传递基元 值取决于父级(并不总是可能的)

这个答案有点晚了,但我偶然发现了一个解决方案,使一切变得容易得多。

如果您使用的是 controllerAs 语法,然后从"this"变量引用它,则实际上可以将表单名称直接分配给控制器。 以下是我在代码中是如何做到的:

我通过 ui-router 配置了控制器(但您可以随心所欲地执行此操作,甚至可以直接在 HTML 中使用类似 <div ng-controller="someController as myCtrl"> 的东西)这是它在 ui 路由器配置中的样子:

views: {
            "": {
                templateUrl: "someTemplate.html",
                controller: "someController",
                controllerAs: "myCtrl"
            }
       }

然后在 HTML 中,您只需将表单名称设置为"controllerAs"。名称"像这样:

<ng-form name="myCtrl.someForm">
    <!-- example form code here -->
    <input name="firstName" ng-model="myCtrl.user.firstName" required>
</ng-form>

现在,在控制器中,您可以非常简单地执行此操作:

angular
.module("something")
.controller("someController",
    [
       "$scope",
        function ($scope) {
            var vm = this;
            if(vm.someForm.$valid){
              // do something
            }
    }]);

是的,您可以在控制器中访问表单(如文档中所述)。

除非窗体在控制器作用域中定义,而是在子作用域中定义。

基本上,一些角度指令,如ng-ifng-repeatng-include,会创建一个隔离的子作用域。任何定义了scope: {}属性的自定义指令也是如此。可能,您的基础组件也妨碍了您。

<form>标签周围引入一个简单的ng-if时,我遇到了同样的问题。

有关详细信息,请参阅以下内容:

  • https://groups.google.com/forum/#!topic/angular/B2uB8-9_Xbk

  • AngularJS - 使用 ng-include 时丢失范围

注意:我建议你重写你的问题。您的问题的答案是肯定的,但您的问题略有不同:

是否可以从控制器访问子作用域中的窗体?

答案很简单:

ng-model="$ctrl.formName"属性添加到窗体中,然后在控制器中,可以通过this.formName

绝对不能在范围内访问表单。 它不是创建的。来自 html 模板的 DOM 加载速度有点慢,就像控制器构造函数一样。解决方案是观察,直到加载 DOM 并定义所有范围!

在控制器中:

$timeout(function(){
    console.log('customerForm:', $scope.customerForm);
    // everything else what you need
});

最新更新