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?

Community · Accepted Answer · 2017-05-23 12:16:00Z

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, 2017 at 12:16

CommunityBot

11 silver badge

answered Dec 12, 2014 at 23:25

AMG

7041 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mwhib Over a year ago

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?

Joseph Le Brech · Accepted Answer · 2017-06-13 11:35:08Z

1

yes like so:

<form name="vm.theFormName">

you can then access it via vm

answered Jun 13, 2017 at 11:35

Joseph Le Brech

6,64911 gold badges54 silver badges84 bronze badges

Comments

Frank Martin · Accepted Answer · 2016-04-19 15:00:52Z

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, 2016 at 15:00

Frank Martin

1,8612 gold badges16 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to reference a form from controller

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related