We Keep Coding

error in getting value from input that have ngIf directive

I get an exception Error TypeError and Error Context when the submit button is clicked. If I will delete the ngIf directive It will work as excepted, The Full StackTrace:
PlayerNameFormComponent.html:8 ERROR TypeError: Cannot read property 'value' of undefined
at Object.eval [as handleEvent] (PlayerNameFormComponent.html:8)
at handleEvent (core.js:13547)
at callWithDebugContext (core.js:15056)
at Object.debugHandleEvent [as handleEvent] (core.js:14643)
at dispatchEvent (core.js:9962)
at eval (core.js:12301)
at SafeSubscriber.schedulerFn [as _next] (core.js:4343)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
at SafeSubscriber.next (Subscriber.js:187)
at Subscriber._next (Subscriber.js:128)
PlayerNameFormComponent.html
<form (ngSubmit)="onSubmit(firstPlayer.value, secondPlayer.value)"> // The line that throws the exception
<div class="input-field col s6">
<label for="firstPlayer">First Player Name</label>
<input #firstPlayer id="firstPlayer" name="firstPlayer" type="text" class="validate">
</div>
<div *ngIf="isMultiplePlayers" class="input-field col s6">
<label for="secondPlayer">Second Player Name</label>
<input #secondPlayer id="secondPlayer" name="secondPlayer" type="text" class="validate">
</div>
<button type="submit" class="waves-effect waves-light btn">Start</button>
</form>
PlayerNameFormComponent.ts
export class PlayerNameFormComponent {
isMultiplePlayers = true;
public onSubmit(firstPlayer: string, secondPlayer: string) {
console.log(firstPlayer);
console.log(secondPlayer);
}
}
EDIT:
I changed my form tag to - <form (ngSubmit)="onSubmit(firstPlayer?.value, secondPlayer?.value)"> and now its print to console the firstPlayer input value and instead of secondPlayer value its prints null
Thanks for any kind of help :)

Template reference variables can be accessed anywhere in template, so the docs state clearly. This article is very helpful to understand what happens with structular directives, in this case your *ngIf.
What happens with the *ngIf is that it creates it's own template, so your template reference is accessible inside the template, the template created by *ngIf and only in that scope.
Here's excerpt from the website:
Sample code that throws error:
<div *ngIf="true">
<my-component #variable [input]="'Do you see me?'>
</div>
{{ variable.input }}
The reason for this is the ngIf directive - or any other directive used together with a star (*). These directives are so called structural directives and the star is just a short form for something more complex. Every time you use a structural directive (ngIf, ngFor, ngSwitchCase, ...) Angular's view engine is desugaring (it removes the syntactical sugar) the star within two steps to the following final form (using the previous ngIf as an example):
<ng-template [ngIf]="true">
...
</ng-template>`
Did you notice? Something extraordinary emerged out of the previous HTML containing the structural directive - the ng-template node. This node is the reason for limiting the scope of the template reference variable to exactly this inner DOM part only - it defines a new template inside. Because of limiting a variable to its defining template any variable defined within the ng-template (and this means within the DOM part of the ngIf) cannot be used outside of it. It cannot cross the borders of a template.
But how to solve your underlying problem, i.e getting the values... You almost have a template-driven form set up already, so you could do that, or then go the reactive way :)

Your problem doesn't come from your *ngIf. Try to remove temporary the error, using Elvis operator:
onSubmit(firstPlayer?.value, secondPlayer?.value)
Or you can make sure into your onSubmit that the HTML element firstPlayer and secondePlayer return HTMLObject.
Into your component, do this:
onSubmit(firstPlayer, secondPlayer) {
console.log(firstPlayer, secondPlayer);
}
And into your HTML template, change the (ngSubmit) line with:
<form (ngSubmit)="onSubmit(firstPlayer, secondPlayer)">
If the result is correction you get ...
<input id="firstPlayer" name="firstPlayer" type="text" class="validate">
...
... into the console.
If it is really undefined, use [ngModel]="firstPlayer" and check if the error still occurs.

You can also just the line as given below to get it working if you don't want to go to the reactive forms approach as pointed by #AT82.
<div *ngIf="isMultiplePlayers" class="input-field col s6">
to
<div [hidden]="isMultiplePlayers" class="input-field col s6">
Try to avoid *(star) directives which cause these errors due to structural changes they do in the DOM.

Using an angular directive stored in a variable in thymleaf

I am working on an issue in an application that mixes angularjs and thymeleaf. I want to build a template in thymeleaf that will allow me to use a variable to specify an angular attribute directive to use.
It seems like thymeleaf does not allow variables to be used as attributes. I have tried the following:
<div th:attr="${portlet.attrDirective}">
....
</div>
Didn't work
<div th:inline="text">
<div [[${portlet.attrDirective}]]>
...
</div>
</div>
Also didn't work
Am I doing something wrong?
There also is the possiblity of they portlet.attrDirective being null.

I got it working finally using the following code:
<div th:attr="${portlet.attrDirective == null} ? nodirective : ${portlet.attrDirective}=${portlet.attrDirective}">
...
</div>
Does anyone have a more readable solution?

Getting Error: [$compile:multidir] using Angular.js

I am getting the following error while using datepicker of Angular.js.
Error message
Error: [$compile:multidir] http://errors.angularjs.org/1.4.6/$compile/multidir?p0=datepicker&p1=&p2=da…-prev%3D%22%3Ci%20class%3D%26quot%3Bfa%20fa-arrow-circle-left%26quot%3B%3E
at Error (native)
at http://oditek.in/Gofasto/js/angularjs.js:6:416
at Q (http://oditek.in/Gofasto/js/angularjs.js:69:353)
at D (http://oditek.in/Gofasto/js/angularjs.js:62:492)
at http://oditek.in/Gofasto/js/angularjs.js:68:182
at http://oditek.in/Gofasto/js/angularjs.js:118:334
at n.$eval (http://oditek.in/Gofasto/js/angularjs.js:132:452)
at n.$digest (http://oditek.in/Gofasto/js/angularjs.js:129:463)
at n.$apply (http://oditek.in/Gofasto/js/angularjs.js:133:236)
at g (http://oditek.in/Gofasto/js/angularjs.js:87:376)
I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Date :</span>
<datepicker date-format="dd-MM-y" button-prev='<i class="fa fa-arrow-circle-left"></i>' button-next='<i class="fa fa-arrow-circle-right"></i>'>
<input type="text" name="birthdate" class="form-control" ng-model="date" placeholder="Add date" />
</datepicker>
</div>
I have already included the 720kb.datepicker module and added the respective css and js files.Still i am getting the above type of error.
Please help me to resolve this error.

Angularjs is exporting a url to explain the error message which is
https://docs.angularjs.org/error/$compile/multidir?p0=datepicker&p1=&p2=da%E2%80%A6-prev%3D%22%3Ci%20class%3D%26quot;fa%20fa-arrow-circle-left%26quot;%3E
in your case and explanation locates your prev button definition.
Multiple directives [datepicker, da…-prev="{3}] asking for {4} on: {5}
Description This error occurs when multiple directives are applied to
the same DOM element, and processing them would result in a collision
or an unsupported configuration.
To resolve this issue remove one of the directives which is causing
the collision.
Example scenarios of multiple incompatible directives applied to the
same element include:
Multiple directives requesting isolated scope. Multiple directives
publishing a controller under the same name. Multiple directives
declared with the transclusion option. Multiple directives attempting
to define a template or templateURL.
Most probably button-prev or button-next is overlaping with datepicker directive.

AngularJS ngMessages can't bind to $index expression

I am building an Angular form that needs repeatable form elements inside an ngRepeat.
<form name="form">
<div ng-repeat="x in [1,2,3,4]">
<input name="something_{{$index}}" ng-model="hi" required>
<div ng-messages="form.something_{{$index}}.$error">
<ng-message="required">This is required</ng-message>
</div>
</div>
<pre>{{form | json: 4}}</pre>
</form>
Angular now supports dynamically declared input names so that you don't have to do something like:
<div ng-repeat="x in [1,2,3,4] ng-form="repeated-form"></div>
And you can use {{$index}} inside the ngRepeat to declare items dynamically. But this doesn't seem to work with ngMessages, which throws an error when I try to bind the index into it.
i.e. this:
<div ng-messages="form.something_{{$index}}.$error">
throws this:
Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 16 of the expression [form.something_{{$index}}.$error] starting at [{{$index}}.$error].
How can we dynamically declare which property on the form to watch, if ng-messages can't watch the form value that is declared with its {{$index}}?
PLNKR: http://plnkr.co/edit/4oOasbtffTgKqmxcppUG?p=preview (check console)

ng-messages="form['something_' + $index].$error"
Should work. I generally wouldn't put {{ }} in any of the ng directives because most of the ng directives execute with priority level 0 (including the {{ }} directive, ngBind). Also, the ng directives all use $evaluate on their argument, so they look at variable values in the scope by default.
Priority 0 for multiple directives on the same element means that Angular can't guarantee which directive will be applied first. Because of that, it is generally best to avoid using ngDirectives together as behavior can vary. ngIf is an exception as it executes with priority 600 (which is why directives aren't evaluated for an ng-if element not currently in the DOM no matter what).

<div ng-repeat="x in [0,1,2,3]">
<input name="something_{{$index}}" ng-model="hi" required>
<div ng-messages="form['something_' + $index].$error">
<ng-message="required">This is required</ng-message>
</div>
</div>
http://plnkr.co/edit/k5nzkpkJwSuf5dvlMMZi?p=preview

AngularJS Nested ng-repeat Not Working in Version 1.2.1

I am working on a system where I would like to nest two ng-repeat statements so that I can work my way through a 2D array. I was able to complete the task successfully using version 1.1.1 as you can see here:
http://jsfiddle.net/skArT/1/
However, when I take the exact same code set and change the version of Angular to 1.2.1 the code no longer works and throws an error:
http://jsfiddle.net/skArT/2/
Error:
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: x in value, Duplicate key: number:0
So my question is, how can I accomplish the task shown in version 1.1.1 with newer versions of Angular?

All you need to do is read the error message and listen to it. Change:
<div ng-repeat="x in value">{{x}}</div>
To:
<div ng-repeat="x in value track by $index">{{x}}</div>

Adding a track by clause solves this. It seems rather trivial to me for it to be required in your case.
<body ng-app="myApp" ng-controller="myCtrl">
<span ng-repeat="(index, value) in field">
<div ng-repeat="(key,x) in value track by key">{{x}}</div>
<br/>
</span>
</body>
http://jsfiddle.net/92bSt/