ngModel doesnt´t work fine with select tag and Class instances in Angulardart 5
up vote
0
down vote
favorite
In a select
tag, I need two-way binding, but is not working.
<select [(ngModel)]="selectedCountry">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
selectedCountry
is aCountry
instance:selectedCountry.id = 3
countries
is aCountry
instance List:country1.id = 1, country3.id = 3, country3.id = 3
selectedCountry
and country3
have equal values but they aren't the same instance. Then country3
option is not selected.
I have overwritten the equality (==) operator and hashCode
for the Country
class, but it still does not work.
What's the problem? Is there something similar to the angular compareWith
directive?
<select [compareWith]="equals" [(ngModel)]="selectedCountry">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
equals(o1: Country, o2: Country) {
return o1.id === o2.id;
}
dart angular-dart
|
show 4 more comments
up vote
0
down vote
favorite
In a select
tag, I need two-way binding, but is not working.
<select [(ngModel)]="selectedCountry">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
selectedCountry
is aCountry
instance:selectedCountry.id = 3
countries
is aCountry
instance List:country1.id = 1, country3.id = 3, country3.id = 3
selectedCountry
and country3
have equal values but they aren't the same instance. Then country3
option is not selected.
I have overwritten the equality (==) operator and hashCode
for the Country
class, but it still does not work.
What's the problem? Is there something similar to the angular compareWith
directive?
<select [compareWith]="equals" [(ngModel)]="selectedCountry">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
equals(o1: Country, o2: Country) {
return o1.id === o2.id;
}
dart angular-dart
[(ngModel)]="selectedCountries"
sounds wrong. There can only be one value be selected. What type isselectedCountries
and what value does it contain? What does "doesnt´t work fine" mean exactly?
– Günter Zöchbauer
yesterday
Instead of implementingoperator==
(which is usually a good idea anyway) you can also use webdev.dartlang.org/angular/guide/…
– Günter Zöchbauer
yesterday
selectedCountry is a class instance and countries list has a class instance with equals property values, but no option is selected.
– rafbermudez
yesterday
TrytrackBy
. I haven't found anything aboutcompareWith
. Where did you get that from?
– Günter Zöchbauer
yesterday
compareWith directive is not a core angular directive: github.com/angular/angular/pull/13349
– rafbermudez
yesterday
|
show 4 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
In a select
tag, I need two-way binding, but is not working.
<select [(ngModel)]="selectedCountry">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
selectedCountry
is aCountry
instance:selectedCountry.id = 3
countries
is aCountry
instance List:country1.id = 1, country3.id = 3, country3.id = 3
selectedCountry
and country3
have equal values but they aren't the same instance. Then country3
option is not selected.
I have overwritten the equality (==) operator and hashCode
for the Country
class, but it still does not work.
What's the problem? Is there something similar to the angular compareWith
directive?
<select [compareWith]="equals" [(ngModel)]="selectedCountry">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
equals(o1: Country, o2: Country) {
return o1.id === o2.id;
}
dart angular-dart
In a select
tag, I need two-way binding, but is not working.
<select [(ngModel)]="selectedCountry">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
selectedCountry
is aCountry
instance:selectedCountry.id = 3
countries
is aCountry
instance List:country1.id = 1, country3.id = 3, country3.id = 3
selectedCountry
and country3
have equal values but they aren't the same instance. Then country3
option is not selected.
I have overwritten the equality (==) operator and hashCode
for the Country
class, but it still does not work.
What's the problem? Is there something similar to the angular compareWith
directive?
<select [compareWith]="equals" [(ngModel)]="selectedCountry">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
equals(o1: Country, o2: Country) {
return o1.id === o2.id;
}
dart angular-dart
dart angular-dart
edited yesterday
Günter Zöchbauer
302k59888837
302k59888837
asked yesterday
rafbermudez
113
113
[(ngModel)]="selectedCountries"
sounds wrong. There can only be one value be selected. What type isselectedCountries
and what value does it contain? What does "doesnt´t work fine" mean exactly?
– Günter Zöchbauer
yesterday
Instead of implementingoperator==
(which is usually a good idea anyway) you can also use webdev.dartlang.org/angular/guide/…
– Günter Zöchbauer
yesterday
selectedCountry is a class instance and countries list has a class instance with equals property values, but no option is selected.
– rafbermudez
yesterday
TrytrackBy
. I haven't found anything aboutcompareWith
. Where did you get that from?
– Günter Zöchbauer
yesterday
compareWith directive is not a core angular directive: github.com/angular/angular/pull/13349
– rafbermudez
yesterday
|
show 4 more comments
[(ngModel)]="selectedCountries"
sounds wrong. There can only be one value be selected. What type isselectedCountries
and what value does it contain? What does "doesnt´t work fine" mean exactly?
– Günter Zöchbauer
yesterday
Instead of implementingoperator==
(which is usually a good idea anyway) you can also use webdev.dartlang.org/angular/guide/…
– Günter Zöchbauer
yesterday
selectedCountry is a class instance and countries list has a class instance with equals property values, but no option is selected.
– rafbermudez
yesterday
TrytrackBy
. I haven't found anything aboutcompareWith
. Where did you get that from?
– Günter Zöchbauer
yesterday
compareWith directive is not a core angular directive: github.com/angular/angular/pull/13349
– rafbermudez
yesterday
[(ngModel)]="selectedCountries"
sounds wrong. There can only be one value be selected. What type is selectedCountries
and what value does it contain? What does "doesnt´t work fine" mean exactly?– Günter Zöchbauer
yesterday
[(ngModel)]="selectedCountries"
sounds wrong. There can only be one value be selected. What type is selectedCountries
and what value does it contain? What does "doesnt´t work fine" mean exactly?– Günter Zöchbauer
yesterday
Instead of implementing
operator==
(which is usually a good idea anyway) you can also use webdev.dartlang.org/angular/guide/…– Günter Zöchbauer
yesterday
Instead of implementing
operator==
(which is usually a good idea anyway) you can also use webdev.dartlang.org/angular/guide/…– Günter Zöchbauer
yesterday
selectedCountry is a class instance and countries list has a class instance with equals property values, but no option is selected.
– rafbermudez
yesterday
selectedCountry is a class instance and countries list has a class instance with equals property values, but no option is selected.
– rafbermudez
yesterday
Try
trackBy
. I haven't found anything about compareWith
. Where did you get that from?– Günter Zöchbauer
yesterday
Try
trackBy
. I haven't found anything about compareWith
. Where did you get that from?– Günter Zöchbauer
yesterday
compareWith directive is not a core angular directive: github.com/angular/angular/pull/13349
– rafbermudez
yesterday
compareWith directive is not a core angular directive: github.com/angular/angular/pull/13349
– rafbermudez
yesterday
|
show 4 more comments
2 Answers
2
active
oldest
votes
up vote
0
down vote
Is there something similar to the angular compareWith directive?
You can use trackBy
https://webdev.dartlang.org/angular/guide/template-syntax#ngfor-with-trackby
Object trackByCountryId(_, dynamic o) => o is Country ? o.id : o;
<select *ngFor="let hero of heroes; trackBy: trackByCountryId" [(ngModel)]="selectedCountry">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
This is useful when the list of countries is changing but it does not solve my problem
– rafbermudez
22 hours ago
No idea what you are talking about. That exactly to solve the issue your question is about. I don't know what you mean with "when the list of countries is changing". I don't see that related.
– Günter Zöchbauer
22 hours ago
add a comment |
up vote
0
down vote
I found the problem:
The use of the identical() function to compare values in select_control_value_accessor of the select ngModel instead ==.
I opened a github issue:
https://github.com/dart-lang/angular/issues/1659
Meanwhile, I'm not using two-way binding complex object:
<select [(ngModel)]="selectedCountryId">
<option *ngFor="let country of countries" [ngValue]="country.id">
{{country.name}}
</option>
</select>
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Is there something similar to the angular compareWith directive?
You can use trackBy
https://webdev.dartlang.org/angular/guide/template-syntax#ngfor-with-trackby
Object trackByCountryId(_, dynamic o) => o is Country ? o.id : o;
<select *ngFor="let hero of heroes; trackBy: trackByCountryId" [(ngModel)]="selectedCountry">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
This is useful when the list of countries is changing but it does not solve my problem
– rafbermudez
22 hours ago
No idea what you are talking about. That exactly to solve the issue your question is about. I don't know what you mean with "when the list of countries is changing". I don't see that related.
– Günter Zöchbauer
22 hours ago
add a comment |
up vote
0
down vote
Is there something similar to the angular compareWith directive?
You can use trackBy
https://webdev.dartlang.org/angular/guide/template-syntax#ngfor-with-trackby
Object trackByCountryId(_, dynamic o) => o is Country ? o.id : o;
<select *ngFor="let hero of heroes; trackBy: trackByCountryId" [(ngModel)]="selectedCountry">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
This is useful when the list of countries is changing but it does not solve my problem
– rafbermudez
22 hours ago
No idea what you are talking about. That exactly to solve the issue your question is about. I don't know what you mean with "when the list of countries is changing". I don't see that related.
– Günter Zöchbauer
22 hours ago
add a comment |
up vote
0
down vote
up vote
0
down vote
Is there something similar to the angular compareWith directive?
You can use trackBy
https://webdev.dartlang.org/angular/guide/template-syntax#ngfor-with-trackby
Object trackByCountryId(_, dynamic o) => o is Country ? o.id : o;
<select *ngFor="let hero of heroes; trackBy: trackByCountryId" [(ngModel)]="selectedCountry">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
Is there something similar to the angular compareWith directive?
You can use trackBy
https://webdev.dartlang.org/angular/guide/template-syntax#ngfor-with-trackby
Object trackByCountryId(_, dynamic o) => o is Country ? o.id : o;
<select *ngFor="let hero of heroes; trackBy: trackByCountryId" [(ngModel)]="selectedCountry">
<option *ngFor="let country of countries" [ngValue]="country">
{{country.name}}
</option>
</select>
answered yesterday
Günter Zöchbauer
302k59888837
302k59888837
This is useful when the list of countries is changing but it does not solve my problem
– rafbermudez
22 hours ago
No idea what you are talking about. That exactly to solve the issue your question is about. I don't know what you mean with "when the list of countries is changing". I don't see that related.
– Günter Zöchbauer
22 hours ago
add a comment |
This is useful when the list of countries is changing but it does not solve my problem
– rafbermudez
22 hours ago
No idea what you are talking about. That exactly to solve the issue your question is about. I don't know what you mean with "when the list of countries is changing". I don't see that related.
– Günter Zöchbauer
22 hours ago
This is useful when the list of countries is changing but it does not solve my problem
– rafbermudez
22 hours ago
This is useful when the list of countries is changing but it does not solve my problem
– rafbermudez
22 hours ago
No idea what you are talking about. That exactly to solve the issue your question is about. I don't know what you mean with "when the list of countries is changing". I don't see that related.
– Günter Zöchbauer
22 hours ago
No idea what you are talking about. That exactly to solve the issue your question is about. I don't know what you mean with "when the list of countries is changing". I don't see that related.
– Günter Zöchbauer
22 hours ago
add a comment |
up vote
0
down vote
I found the problem:
The use of the identical() function to compare values in select_control_value_accessor of the select ngModel instead ==.
I opened a github issue:
https://github.com/dart-lang/angular/issues/1659
Meanwhile, I'm not using two-way binding complex object:
<select [(ngModel)]="selectedCountryId">
<option *ngFor="let country of countries" [ngValue]="country.id">
{{country.name}}
</option>
</select>
add a comment |
up vote
0
down vote
I found the problem:
The use of the identical() function to compare values in select_control_value_accessor of the select ngModel instead ==.
I opened a github issue:
https://github.com/dart-lang/angular/issues/1659
Meanwhile, I'm not using two-way binding complex object:
<select [(ngModel)]="selectedCountryId">
<option *ngFor="let country of countries" [ngValue]="country.id">
{{country.name}}
</option>
</select>
add a comment |
up vote
0
down vote
up vote
0
down vote
I found the problem:
The use of the identical() function to compare values in select_control_value_accessor of the select ngModel instead ==.
I opened a github issue:
https://github.com/dart-lang/angular/issues/1659
Meanwhile, I'm not using two-way binding complex object:
<select [(ngModel)]="selectedCountryId">
<option *ngFor="let country of countries" [ngValue]="country.id">
{{country.name}}
</option>
</select>
I found the problem:
The use of the identical() function to compare values in select_control_value_accessor of the select ngModel instead ==.
I opened a github issue:
https://github.com/dart-lang/angular/issues/1659
Meanwhile, I'm not using two-way binding complex object:
<select [(ngModel)]="selectedCountryId">
<option *ngFor="let country of countries" [ngValue]="country.id">
{{country.name}}
</option>
</select>
answered 22 hours ago
rafbermudez
113
113
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53204349%2fngmodel-doesnt%25c2%25b4t-work-fine-with-select-tag-and-class-instances-in-angulardart-5%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
[(ngModel)]="selectedCountries"
sounds wrong. There can only be one value be selected. What type isselectedCountries
and what value does it contain? What does "doesnt´t work fine" mean exactly?– Günter Zöchbauer
yesterday
Instead of implementing
operator==
(which is usually a good idea anyway) you can also use webdev.dartlang.org/angular/guide/…– Günter Zöchbauer
yesterday
selectedCountry is a class instance and countries list has a class instance with equals property values, but no option is selected.
– rafbermudez
yesterday
Try
trackBy
. I haven't found anything aboutcompareWith
. Where did you get that from?– Günter Zöchbauer
yesterday
compareWith directive is not a core angular directive: github.com/angular/angular/pull/13349
– rafbermudez
yesterday