【问题标题】:How to reference a form from controller如何从控制器引用表单
【发布时间】:2015-02-11 17:37:23
【问题描述】:

背景: 我有一个 AngularJs 向导,例如 3 个步骤的应用程序。向导步骤包含 4 个共享单个控制器的 uiRouter 状态。第一个状态是包含引导药丸导航的抽象视图,其中 ui 视图作为其他 3 个嵌套状态的占位符。 3 个嵌套状态有一个单独的视图,其中包含唯一命名的表单。我想通过检查当前可见表单是否有效来控制父状态下的药丸导航;如果表单无效,那么我将隐藏/禁用用户单击下一个导航药丸的能力。

注意:我使用的是在 uiRouter 状态中声明的“controller as”语法。

问题: 我似乎无法从控制器中获取对当前可查看表单的引用。

这是我尝试过的: 1. 在初始化调用中传递对表单可见表单的引用 --> 当我尝试写入控制台时出现未定义错误 2.重命名表单,甚至传递此链接中描述的范围引用: http://www.technofattie.com/2014/07/01/using-angular-forms-with-controller-as-syntax.html

演示: 这是一个显示意图的 plnkr 链接: http://plnkr.co/edit/YUnwoBD2dt4bzbfujJSW

控制器代码:

(function () {
    'use strict';

    angular
        .module('recquisitionManagement')
        .controller('RecquisitionEditCtrl', [RecquisitionEditCtrl]);

    function RecquisitionEditCtrl() {

        var vm = this;

        //  get ref to request form
        vm.setRequestForm = function(form) {
            vm.requestForm = form;
            console.log(form);

            // tried to call from form ng-init --> undefined response
        }

        //  console.log($scope.vm.requestForm);
        //  console.log(vm.requestForm);

        vm.recquisition = { id: 0, name: 'some name', date: 'date here' };
        vm.requestFormIsInvalid = true;    //this.requestForm.$valid;
        vm.approvalFormIsInvalid = true;


        if (vm.recquisition && vm.recquisition.id > 0) {
            vm.title = 'Edit';
        } else {
            vm.title = 'Create';
        }
    }
}());

关于如何获取所需的表单参考有什么建议吗?

【问题讨论】:

    标签: angularjs angularjs-scope


    【解决方案1】:

    这里解释了多个选项:Can I access a form in the controller?

    重命名共享控制器名称的函数并尝试使用常见的角度实践也是很好的。

    【讨论】:

    • 我已经尝试了参考链接中的选项;他们似乎在我的场景中不起作用。您能否澄清命名评论;是命名约定导致了这个问题吗?
    【解决方案2】:

    是的,就像这样:

    <form name="vm.theFormName">
    

    然后您可以通过vm访问它

    【讨论】:

      【解决方案3】:

      现在我意识到有点晚了,但是您将 ctrl 作为数组传递,需要更改:

      .controller('RecquisitionEditCtrl', [RecquisitionEditCtrl]);
      

      到这里:

      .controller('RecquisitionEditCtrl', RecquisitionEditCtrl);
      

      【讨论】:

        猜你喜欢
        • 2021-02-09
        • 2011-08-30
        • 2017-12-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-10-05
        • 1970-01-01
        相关资源
        最近更新 更多