0

I have a very simple problem.

I have a form with a button passing it as an object to a controller. Everything is working totally fine but the current name (by which it is currently passed) cannot stay and needs to be dynamic as I have multiple tabs and the names cant be the same for multiple forms.

So the problem. Name now, working: 

<form name="form" novalidate>
...
<button ... ng-click="Tab.validate.validate(form)">

Desired variant that does not work:

<form name="{{'form_' + tab.name}}" novalidate>
...
<button ... ng-click="Tab.validate({{'form_' + tab.name}})">

Form name in this case is properly 'form_tabName'. I use this expression syntax for id's and many other name elements to pre or suffix them in my code so its the ngclick side I'd like to change.

Error:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 37 of the expression [Tab.validate('form_' + {{tab.name}})] starting at [{tab.name}})].

Cœur
  • 37,241
  • 25
  • 195
  • 267
hardcore
  • 121
  • 12

2 Answers2

2

The problem here is not the name attribute but the ng-click directive attribute. ng-click takes a JavaScript expression, not the Angular template tags ({{}}). Try this:

<button ... ng-click="Tab.validate('form_' + tab.name)">
Agop
  • 1,907
  • 17
  • 23
  • I left the name part as it was and it seems like now its just passing the string to the controller and nothing else(not the actual object). – hardcore Aug 07 '15 at 14:59
  • Ah. Looks like the problem is deeper than your question implies. What, exactly, is your controller looking for? Some kind of form object? You may need to look it up by its string name (e.g. `$scope[formName]`). It depends on what you're trying to achieve. – Agop Aug 07 '15 at 15:02
  • `this.validate = function (form) { console.log(form); ` I have this on the other side and with the original one I was getting an object(the form itself - exactly what I want for validation) now its just the string. – hardcore Aug 07 '15 at 15:02
0

Here is a quick solution for you

  <form name="forms.form_{{tab.name}}">
    <button ng-click="Tab.validate(forms['form_'+tab.name])"></button>
  </form>

This will actually work (see it in this plunker)

Using a subobject (forms.xxx) you can access it using a string like with an array forms['form_'+tab.name]

Hope it helped.

Okazari
  • 4,597
  • 1
  • 15
  • 27
  • Thank you it does work but I think it will take a bit of time to wrap my head around why. – hardcore Aug 07 '15 at 16:08
  • Is the 'forms' an array object now with one element inside it? And that one element is the form element with the particular name and that single element is being passed down? If I have multiple forms on multiple tabs, are they all part of the same forms array? – hardcore Aug 07 '15 at 16:19
  • @hardcore Using my solution you basically create a Forms object with a property form_1 that will be the form object. In javascript you can use both forms.form_1 and forms["form_1"] to access the property. And yes if you declare a forms.form_2 property it will be part of the same forms object. Finally you will have a forms object with all your forms as properties . Hope i helped a bit your understanding. – Okazari Aug 10 '15 at 12:02