Angular 6 checkbox triggers change when ngModel value is true

up vote
0
down vote

favorite

I have ngFor and inside I have checkbox.

<input type="checkbox" name="checkbox-{{i}}"

  (change)="clickOn(test.fav)" [(ngModel)]="test.fav" />

clickOn() event triggers, when test.fav value is true. Anybody used to have this problem? Regards.

edited Nov 10 at 17:19

HDJEMAI

4,025123553

asked Nov 10 at 14:20

KoboldMines

376

Do you mean it doesn't fire a ngModelChange event when value is false?
– Pankaj Parkar
Nov 10 at 14:24

Or that it triggers initially, wihout any user action?
– ConnorsFan
Nov 10 at 14:24

@PankajParkar I had to say (change). (change) function fires when checkbox ngModel value is true.
– KoboldMines
Nov 10 at 14:30

It triggers regardles of value.
– ritaj
Nov 10 at 14:36

@KoboldMines can you please provide me a stackblitz with reproducible problem?
– Pankaj Parkar
Nov 10 at 15:02

add a comment |

up vote
0
down vote

favorite

I have ngFor and inside I have checkbox.

<input type="checkbox" name="checkbox-{{i}}"

  (change)="clickOn(test.fav)" [(ngModel)]="test.fav" />

clickOn() event triggers, when test.fav value is true. Anybody used to have this problem? Regards.

edited Nov 10 at 17:19

HDJEMAI

4,025123553

asked Nov 10 at 14:20

KoboldMines

376

Do you mean it doesn't fire a ngModelChange event when value is false?
– Pankaj Parkar
Nov 10 at 14:24

Or that it triggers initially, wihout any user action?
– ConnorsFan
Nov 10 at 14:24

@PankajParkar I had to say (change). (change) function fires when checkbox ngModel value is true.
– KoboldMines
Nov 10 at 14:30

It triggers regardles of value.
– ritaj
Nov 10 at 14:36

@KoboldMines can you please provide me a stackblitz with reproducible problem?
– Pankaj Parkar
Nov 10 at 15:02

add a comment |

up vote
0
down vote

favorite

I have ngFor and inside I have checkbox.

<input type="checkbox" name="checkbox-{{i}}"

  (change)="clickOn(test.fav)" [(ngModel)]="test.fav" />

clickOn() event triggers, when test.fav value is true. Anybody used to have this problem? Regards.

edited Nov 10 at 17:19

HDJEMAI

4,025123553

asked Nov 10 at 14:20

KoboldMines

376

I have ngFor and inside I have checkbox.

<input type="checkbox" name="checkbox-{{i}}"

  (change)="clickOn(test.fav)" [(ngModel)]="test.fav" />

clickOn() event triggers, when test.fav value is true. Anybody used to have this problem? Regards.

angular checkbox angular6 angular-ngmodel

edited Nov 10 at 17:19

HDJEMAI

4,025123553

asked Nov 10 at 14:20

KoboldMines

376

edited Nov 10 at 17:19

HDJEMAI

4,025123553

asked Nov 10 at 14:20

KoboldMines

376

edited Nov 10 at 17:19

HDJEMAI

4,025123553

edited Nov 10 at 17:19

HDJEMAI

4,025123553

edited Nov 10 at 17:19

HDJEMAI

4,025123553

asked Nov 10 at 14:20

KoboldMines

376

asked Nov 10 at 14:20

KoboldMines

376

asked Nov 10 at 14:20

KoboldMines

376

Do you mean it doesn't fire a ngModelChange event when value is false?
– Pankaj Parkar
Nov 10 at 14:24

Or that it triggers initially, wihout any user action?
– ConnorsFan
Nov 10 at 14:24

@PankajParkar I had to say (change). (change) function fires when checkbox ngModel value is true.
– KoboldMines
Nov 10 at 14:30

It triggers regardles of value.
– ritaj
Nov 10 at 14:36

@KoboldMines can you please provide me a stackblitz with reproducible problem?
– Pankaj Parkar
Nov 10 at 15:02

add a comment |

Do you mean it doesn't fire a ngModelChange event when value is false?
– Pankaj Parkar
Nov 10 at 14:24

Or that it triggers initially, wihout any user action?
– ConnorsFan
Nov 10 at 14:24

@PankajParkar I had to say (change). (change) function fires when checkbox ngModel value is true.
– KoboldMines
Nov 10 at 14:30

It triggers regardles of value.
– ritaj
Nov 10 at 14:36

@KoboldMines can you please provide me a stackblitz with reproducible problem?
– Pankaj Parkar
Nov 10 at 15:02

Do you mean it doesn't fire a ngModelChange event when value is false?
– Pankaj Parkar
Nov 10 at 14:24

Or that it triggers initially, wihout any user action?
– ConnorsFan
Nov 10 at 14:24

@PankajParkar I had to say (change). (change) function fires when checkbox ngModel value is true.
– KoboldMines
Nov 10 at 14:30

It triggers regardles of value.
– ritaj
Nov 10 at 14:36

@KoboldMines can you please provide me a stackblitz with reproducible problem?
– Pankaj Parkar
Nov 10 at 15:02

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

Use reference of checkbox element and pass the value or use ngModelChange

Replace the below code

<input type="checkbox" name="checkbox-{{i}}" (change)="clickOn(test.fav)" [(ngModel)]="test.fav" />

<input type="checkbox" name="checkbox-{{i}}" #test 

     (change)="clickOn(test.value)" [(ngModel)]="test.fav" />

 <input type="checkbox" name="checkbox-{{i}}" #test 

     (ngModelChange)="clickOn($event)" [(ngModel)]="test.fav" />

answered Nov 10 at 16:42

Sunil Singh

4,6811624

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53239859%2fangular-6-checkbox-triggers-change-when-ngmodel-value-is-true%23new-answer', 'question_page');
}
);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

Use reference of checkbox element and pass the value or use ngModelChange

Replace the below code

<input type="checkbox" name="checkbox-{{i}}" (change)="clickOn(test.fav)" [(ngModel)]="test.fav" />

<input type="checkbox" name="checkbox-{{i}}" #test 

     (change)="clickOn(test.value)" [(ngModel)]="test.fav" />

 <input type="checkbox" name="checkbox-{{i}}" #test 

     (ngModelChange)="clickOn($event)" [(ngModel)]="test.fav" />

answered Nov 10 at 16:42

Sunil Singh

4,6811624

add a comment |

up vote
0
down vote

Use reference of checkbox element and pass the value or use ngModelChange

Replace the below code

<input type="checkbox" name="checkbox-{{i}}" (change)="clickOn(test.fav)" [(ngModel)]="test.fav" />

<input type="checkbox" name="checkbox-{{i}}" #test 

     (change)="clickOn(test.value)" [(ngModel)]="test.fav" />

 <input type="checkbox" name="checkbox-{{i}}" #test 

     (ngModelChange)="clickOn($event)" [(ngModel)]="test.fav" />

answered Nov 10 at 16:42

Sunil Singh

4,6811624

add a comment |

up vote
0
down vote

Use reference of checkbox element and pass the value or use ngModelChange

Replace the below code

<input type="checkbox" name="checkbox-{{i}}" (change)="clickOn(test.fav)" [(ngModel)]="test.fav" />

<input type="checkbox" name="checkbox-{{i}}" #test 

     (change)="clickOn(test.value)" [(ngModel)]="test.fav" />

 <input type="checkbox" name="checkbox-{{i}}" #test 

     (ngModelChange)="clickOn($event)" [(ngModel)]="test.fav" />

answered Nov 10 at 16:42

Sunil Singh

4,6811624

Use reference of checkbox element and pass the value or use ngModelChange

Replace the below code

<input type="checkbox" name="checkbox-{{i}}" (change)="clickOn(test.fav)" [(ngModel)]="test.fav" />

<input type="checkbox" name="checkbox-{{i}}" #test 

     (change)="clickOn(test.value)" [(ngModel)]="test.fav" />

 <input type="checkbox" name="checkbox-{{i}}" #test 

     (ngModelChange)="clickOn($event)" [(ngModel)]="test.fav" />

answered Nov 10 at 16:42

Sunil Singh

4,6811624

answered Nov 10 at 16:42

Sunil Singh

4,6811624

answered Nov 10 at 16:42

Sunil Singh

4,6811624

answered Nov 10 at 16:42

Sunil Singh

4,6811624

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky