Access angularj form object via ng-click without passing model name

Question

In my app I have multiple forms with different names.

I need to access angular form object in my function called from ng-click event

Example:

https://jsfiddle.net/EvgeniiMalikov/fpt5kcba/

For some reasons every ng-click attr should look the same all times, so I can't just write <a ng-click="model.func(form.name)"> Is there a way to do this without passing form model to a function? maybe access form via event or pass something like $this.form to function.

please note: In example I have one form, in real app - many forms with different names

You don't need to pass the form to the controller, it's available on the $scope that is associated with the controller. Since you are using the `controllerAs` syntax, and you've named the form using the controller name (the "mv" in `mv.form`), you can merely access the form in the controller using `mv.form` ... and do not need to pass it into your `reset()` function. — Sunil D., Nov 19 '15 at 15:20
Yes, I know it. But I have many forms and one function for all forms. — Evgenii Malikov, Nov 19 '15 at 15:34
Are you simply trying to reset **all** form elements via the reset function? Or are you wanting to reset a single form element, providing it a reset function unique to that field? — jusopi, Nov 19 '15 at 15:47

Ignacio Villaverde · Answer 1 · 2015-11-19T17:39:15.943

2

I have forked your jsfiddle for showing you how to do it: https://jsfiddle.net/fpt5kcba/2/

As you assigned a name to the form, name="mv.form" you can access it by the same way in your controller.

angular.module('myApp', []).controller('myCtrl', function () {
    var mv = this;
    mv.reset = function () {
        mv.text='';
        mv.form.$setPristine();
    }
});

EDIT:

If what you want is to make it dynamically, take a look at this jsfiddle: https://jsfiddle.net/fpt5kcba/5/

This is the way:

<div ng-app="myApp" ng-controller="myCtrl as mv">
            <div ng-repeat="form in mv.forms">
                {{form.id}}
                <form name="mv.{{form.id}}">
                    <input ng-model="form.text"><br>
                    <a href="#" ng-show="mv[form.id].$dirty" ng-click="mv.reset(form.id, $index)">reset</a>
                </form>
            </div>
</div>

Controller:

angular.module('myApp', []).controller('myCtrl', function ($scope) {
    var mv = this;

    mv.forms = [
    {
        id: "form1",
        text: ""
    },
    {
        id: "form2",
        text: ""
    }];

    mv.values = {
        form1: "",
        form2: ""
    };

    mv.reset = function (formId, index) {
        mv.text='';
        mv.forms[index].text = "";
        mv[formId].$setPristine();
    }
});

Take always in count that $setPristine is not used for clearing fields.

Sets the form to its pristine state.

This method can be called to remove the 'ng-dirty' class and set the form to its pristine state (ng-pristine class). This method will also propagate to all the controls contained in this form.

Setting a form back to a pristine state is often useful when we want to 'reuse' a form after saving or resetting it.

edited Nov 19 '15 at 17:39

answered Nov 19 '15 at 15:25

Ignacio Villaverde

1,264
1
11
15

I know, but in real app I have different forms with different names, so I can't just hardcode form name in function – Evgenii Malikov Nov 19 '15 at 15:33
If that's the case and you want to make it as dynamic as possible, a directive would best suit this functionality. – jusopi Nov 19 '15 at 15:39
@EvgeniiMalikov take a look at the edited answer. Hope it helps! – Ignacio Villaverde Nov 19 '15 at 16:09
1

@EvgeniiMalikov yes a directive is the right approach. Your directive can require the Angular FormController, and then it won't matter what the form name is, b/c the form controller is passed into the directive. – Sunil D. Nov 19 '15 at 17:55
1

@EvgeniiMalikov It's explained in [this answer](http://stackoverflow.com/a/17621174/398606) – Sunil D. Nov 19 '15 at 17:56
I believe that in this case it is really simple to solve it without a directive. But maybe the real case is quite more complex than the one you are showing. Obviously a directive is a clean and tidy way to cover it, however I would not abuse of them for keeping a great performance. – Ignacio Villaverde Nov 19 '15 at 18:08
my forms not generated in ng-repeat(only controls of forms) because of different set of controls for each form. Maybe I really should try to create directive. – Evgenii Malikov Nov 19 '15 at 20:16
@EvgeniiMalikov if you are using `ng-repeat` you might want to use one parent form (outside of the repeat) and then use `ng-form` inside each repeated element. The repeated element can deal w/it's local form (via `ng-form`) and you can still use the parent form for validation. The form that is repeated with `ng-repeat` can use the same name in each repeated element, they won't collide b/c they are in different scopes... – Sunil D. Nov 20 '15 at 22:13

Access angularj form object via ng-click without passing model name

1 Answers1