How to reference a form from controller

Question

Background: I have an AngularJs wizard like app with 3 steps. The wizard steps contain 4 uiRouter states that share a single controller. The first state is an abstract view containing bootstrap pill navigation with a ui-view as a placeholder for the other 3 nested states. The 3 nested states have a separate views that contain uniquely named forms. I would like to control the pill navigation in the the parent state by checking if the current visible form is valid; if the form is invalid then I would hide/disable the ability for the user to click on the next navigation pill.

Note: I'm using the "controller as" syntax declared in the uiRouter states.

Issue: I don't seem to be able to get a reference to the current viewable form from within the controller.

Here's what I've tried: 1. passing in the reference to the form visible form in an init call --> gets undefined error when I try to write to console 2. renaming the forms and even passing in the scope reference as described in this link: http://www.technofattie.com/2014/07/01/using-angular-forms-with-controller-as-syntax.html

Demo: Here's a plnkr link that shows intent: http://plnkr.co/edit/YUnwoBD2dt4bzbfujJSW

Controller code:

(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';
        }
    }
}());

Any suggestions on how to get the needed form reference?

score 1 · Answer 1 · edited May 23 '17 at 12:16

1

Multiple options are explained here: Can I access a form in the controller?

Also it can be good to rename functions that share the name of the controller and try to use the common angular practice.

edited May 23 '17 at 12:16

Community

1
1

answered Dec 12 '14 at 23:25

AMG

704
1
8
20

I've tried the options found in the referenced link; they don't seem to work in my scenario. Could you please clarify the naming comment; is the naming convention causing the issue? – mwhib Dec 13 '14 at 07:15

score 1 · Answer 2 · answered Jun 13 '17 at 11:35

1

yes like so:

<form name="vm.theFormName">

you can then access it via vm

answered Jun 13 '17 at 11:35

Joseph Le Brech

6,541
11
49
84

score 0 · Answer 3 · answered Apr 19 '16 at 15:00

0

Bit late now I realise but you were passing the ctrl as an array, needed to change this:

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

to this:

.controller('RecquisitionEditCtrl', RecquisitionEditCtrl);

answered Apr 19 '16 at 15:00

Frank Martin

1,611
1
14
18

How to reference a form from controller

3 Answers3