error in getting value from input that have ngIf directive - javascript

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.

Related

Assigning ngModel to property is undefined when coming from #Input

I have a component with the following input property.
#Input() addressAssociation: AccountAssociation;
which has:
address: Address;
Inside Address there's a property I want to bind to, which is stateCode.
In my template I have this:
<div class="fcol-md-4 fcol-xs-12 form-group" *ngIf="!zipCodeValidating && addressAssociation.address">
<label for="{{name}}State" class="uk-label">State / U.S Territory</label>
<select [(ngModel)]="addressAssociation.address.stateCode"
[disabled]="isListedZipCode"
#addState="ngModel"
required>
<option [ngValue]="state.abbreviation" *ngFor="let state of states">{{state.fullName}} ({{state.abbreviation}})</option>
</select>
</div>
<div class="text--error" *ngIf="addState.errors && addState.touched">
<span *ngIf="addState.errors.required">State is required.</span>
</div>
The problem is that when the template loads, it always throws an error saying: Cannot read property errors of undefined.
Also, I tried to print the variable with {{addState | json}} but throws a circular reference error. And also, just trying to print addState, and it never changed even when going out from the disabled state and changing its value.
The thing is that apparently the variable #addState is not being populated with the ngModel any ideas on how to solve this?
Updated answer:
You have a scoping issue. You are assigning the #addState inside an *ngIf. And then you are referencing addState OUTSIDE of that *ngIf. This does not work - the template variable will only be available inside the same scope that it was created. Try moving your error test div inside that *ngIf. Put it just under the </select>
Old answer:
You should be using the Safe Navigation Operator (https://angular.io/guide/template-syntax#safe-navigation-operator)
<div class="text--error" *ngIf="addState?.errors && addState?.touched">
<span *ngIf="addState?.errors.required">State is required.</span>
</div>
I believe your error is coming from this code
<div class="text--error" *ngIf="addState.errors && addState.touched">
<span *ngIf="addState.errors.required">State is required.</span>
</div>
try adding addState to your ngIf
*ngIf="addState && addState.errors && addState.touched"
addState is not defined on component load so addState.errors produces that error

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

Multiple view models break knockout.js

I'm trying to use multiple view models as suggested in the documentation and in this other answer.
I'm getting an error in the console complaining about a variable not being defined:
Uncaught ReferenceError: Unable to process binding "foreach: function (){return seals }"
Message: seals is not defined
Reproduction online
HTML
<!-- ko foreach: seals -->
<div class="form-group">
<label for="seal" class="col-xs-2 control-label" data-bind="text: 'Seal ' + name"></label>
<div class="col-xs-8">
<input type="text" class="form-control" data-bind="attr: {name: 'seal' + formName}" />
</div>
</div>
<!-- /ko -->
JS
ko.applyBindings(demo, document.body);
ko.applyBindings(addEquipmentModel, document.getElementById('whatever'));
The problem is here:
ko.applyBindings(demo, document.body);
You are applying a model to document.body, so it's going to try and parse and bind the whole document. When it gets to the part with:
<!-- ko foreach: seals -->
You get an error because the demo model doesn't have a seals property.
In practice, you don't want the elements that you are binding to overlap. In other words, don't bind one model to a child element of an element that is bound to another model. They should be siblings, or cousins. Not direct descendants.
If you need several viewmodels nested in your view, or even in a child-parent relation, you should consider using Knockout components for that. Another possibility aside from that is to use apply(this) in your main viewmodel to the other viewmodels 'class' so your main viewmodel sort of inherits the functionality and properties of the referred model. This will, though, lead to problems if you have name concurrencies in your viewmodels.

Angular UI/bootstrap typeahead showing 'Error: No controller: ngModel' error

In my application I am calling an http service to get data and I am using angular-ui bootstrap's typeahead directive (ui-bootstrap-tpls-0.6.0.min.js). I have a partial that has a form that mentions the controller and it includes a partial inside ng-repeat. This second partial has the typeahead.
Main form partial:
<form
id="myform"
name="myform"
onsubmit="javascript: return false"
enctype="application/json"
ng-controller="EducationCollegeCtrl">
// doing other stuff
...
<div ng-if="model.hasData">
<div ng-repeat="college in model.academicRecords" ng-form="collegeForm">
<div ng-include="'resources/appc/modules/main/education/components/collegetype.all.html'"></div>
</div>
</div>
// other stuff going on here
collegetype.all.html:
....
<label for="institution">Institution name:</label>
<div>
<input type="text" ng-model="college.organizationName" typeahead="item.name for item in matchingInstitutions($viewValue)>
</div>
....
EducationCollegeCtrl.js:
angular.module('theApp',['ui.bootstrap']).controller('EducationCollegeCtrl', function ($scope, $http) {
...
$scope.matchingInstitutions = function(partialName) {
return $http.get('lookup/institutions?name=' + partialName ).then(function(response){
return response.data.institutions;
});
};
...
The service gets called and the drop-down shows up correctly with the name of institutions. But in the browser console, I see the below error for every entry in the drop-down
console.log:
Error: No controller: ngModel
at Error (<anonymous>)
at getControllers (/resources/lib/angular/1.1.5/angular.js:4899:39)
at nodeLinkFn (/resources/lib/angular/1.1.5/angular.js:5040:55)
at compositeLinkFn (/resources/lib/angular/1.1.5/angular.js:4626:37)
at nodeLinkFn (/resources/lib/angular/1.1.5/angular.js:5033:40)
at compositeLinkFn (/resources/lib/angular/1.1.5/angular.js:4626:37)
at publicLinkFn (/resources/lib/angular/1.1.5/angular.js:4531:46)
at ngRepeatAction (/resources/lib/angular/1.1.5/angular.js:15638:33)
at Object.$watchCollectionAction (/resources/lib/angular/1.1.5/angular.js:8867:29)
at Object.applyFunction [as fn] (<anonymous>:778:50) <typeahead-match index="$index" match="match" query="query" template-url="templateUrl" class="ng-isolate-scope ng-scope"> angular.js:6422
My understanding of the error is that a 'required' attribute in the directive is missing and that is what angular is complaining about, but as you can see in the partial, I do have the ng-model attribute defined and also the controller is specified in the main form partial. What am i missing here ?
EDIT: removed irrelevant parts of url.
ng-include creates child $scope, that prototypically inherits it's parent $scope. That means that your ng-model="college.organizationName" won't reference college variable in parent but will shadow it. And your new college variable won't have organizationName property. The most simple way probably will be just not to use ng-include, since you have ng-repeat and already avoided "don't repeat yourself" rule.

Categories