Mixing
Angular 4 checkbox change value
7
how could you achieve in Angular 4 that when you register in a checkbox save an "A" or "B" value. As much as I try, he is only sending me true or false, I hope someone can help me.
registry.component.ts
this.userForm = new FormGroup({
state: new FormControl('',),
});
registry.component.html
<div class="form-group">
<label>State</label>
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'A':'B')" formControlName="state"/>
</div>
<pre>{{userForm.value | json}}</pre>
That way I can get the console to show the value I want (A or B) but in the JSON is still true or false.
angular rest typescript
asked Nov 2 '17 at 5:30
J. EduJ. Edu
43116
add a comment |
7
how could you achieve in Angular 4 that when you register in a checkbox save an "A" or "B" value. As much as I try, he is only sending me true or false, I hope someone can help me.
registry.component.ts
this.userForm = new FormGroup({
state: new FormControl('',),
});
registry.component.html
<div class="form-group">
<label>State</label>
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'A':'B')" formControlName="state"/>
</div>
<pre>{{userForm.value | json}}</pre>
That way I can get the console to show the value I want (A or B) but in the JSON is still true or false.
angular rest typescript
asked Nov 2 '17 at 5:30
J. EduJ. Edu
43116
3
your code?????????
– Saurabh Agrawal
Nov 2 '17 at 5:32
add a comment |
7
7
7
2
how could you achieve in Angular 4 that when you register in a checkbox save an "A" or "B" value. As much as I try, he is only sending me true or false, I hope someone can help me.
registry.component.ts
this.userForm = new FormGroup({
state: new FormControl('',),
});
registry.component.html
<div class="form-group">
<label>State</label>
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'A':'B')" formControlName="state"/>
</div>
<pre>{{userForm.value | json}}</pre>
That way I can get the console to show the value I want (A or B) but in the JSON is still true or false.
angular rest typescript
asked Nov 2 '17 at 5:30
J. EduJ. Edu
43116
how could you achieve in Angular 4 that when you register in a checkbox save an "A" or "B" value. As much as I try, he is only sending me true or false, I hope someone can help me.
registry.component.ts
this.userForm = new FormGroup({
state: new FormControl('',),
});
registry.component.html
<div class="form-group">
<label>State</label>
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'A':'B')" formControlName="state"/>
</div>
<pre>{{userForm.value | json}}</pre>
That way I can get the console to show the value I want (A or B) but in the JSON is still true or false.
angular rest typescript
angular rest typescript
asked Nov 2 '17 at 5:30
J. EduJ. Edu
43116
asked Nov 2 '17 at 5:30
J. EduJ. Edu
43116
edited Nov 2 '17 at 23:37
J. Edu
asked Nov 2 '17 at 5:30
J. EduJ. Edu
43116
asked Nov 2 '17 at 5:30
J. EduJ. Edu
43116
asked Nov 2 '17 at 5:30
J. EduJ. Edu
43116
43116
3
your code?????????
– Saurabh Agrawal
Nov 2 '17 at 5:32
add a comment |
3
your code?????????
– Saurabh Agrawal
Nov 2 '17 at 5:32
3
3
your code?????????
– Saurabh Agrawal
Nov 2 '17 at 5:32
your code?????????
– Saurabh Agrawal
Nov 2 '17 at 5:32
add a comment |
5 Answers
5
active
oldest
votes
19
This it what you are looking for:
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'A':'B')" />
Inside your class:
checkValue(event: any){
console.log(event);
}
Also include FormsModule in app.module.ts to make ngModel work !
Hope it Helps!
edited Nov 19 '18 at 18:55
Federico Grandi
2,70021127
answered Nov 2 '17 at 7:30
SHOHIL SETHIASHOHIL SETHIA
5531521
With your answer I can see that the value changes in the console ("A", "B"), but I have to add that in the registry I sent a JSON, agrunpando in a FormGroup and FormControl, in the JSON it continues sending true or false , any help on how to fix that?
– J. Edu
Nov 2 '17 at 23:30
Is there a way you can parse it ? I can't understand your current problem, !
– SHOHIL SETHIA
Nov 3 '17 at 9:20
add a comment |
11
Give a try on this,
Template
<input (change)="FieldsChange($event)" value="angular" type="checkbox"/>
Ts File
FieldsChange(values:any){
console.log(values.currentTarget.checked);
}
answered Nov 2 '17 at 6:07
balajivaishnavbalajivaishnav
1,09921425
add a comment |
7
changed = (evt) => {
this.isChecked = evt.target.checked;
}
<input type="checkbox" [checked]="checkbox" (change)="changed($event)" id="no"/>
answered Aug 30 '18 at 7:37
Vadivel SubramanianVadivel Subramanian
10116
1
Please don't just dump a code block as an answer. A good answer explains the solution and gives some context.
– Sebastiaan
Aug 30 '18 at 7:46
add a comment |
2
I am guessing that this is what something you are trying to achieve.
<input type="checkbox" value="a" (click)="click($event)">A
<input type="checkbox" value="b" (click)="click($event)">B
click(ev){
console.log(ev.target.defaultValue);
}
answered Nov 2 '17 at 5:59
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
@J. Edu : You can approve the answer if it has resolved your question. Thanks,
– AddWeb Solution Pvt Ltd
Nov 2 '17 at 7:17
add a comment |
0
<input type="checkbox" value="a" (click)="clicked('A')">A
<input type="checkbox" value="b" (click)="clicked('B')">B
clicked(val){
console.log(val);
}
do want something like that?
answered Nov 2 '17 at 6:07
Imdad AliImdad Ali
383112
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',
autoActivateHeartbeat: false,
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47068222%2fangular-4-checkbox-change-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
19
This it what you are looking for:
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'A':'B')" />
Inside your class:
checkValue(event: any){
console.log(event);
}
Also include FormsModule in app.module.ts to make ngModel work !
Hope it Helps!
edited Nov 19 '18 at 18:55
Federico Grandi
2,70021127
answered Nov 2 '17 at 7:30
SHOHIL SETHIASHOHIL SETHIA
5531521
With your answer I can see that the value changes in the console ("A", "B"), but I have to add that in the registry I sent a JSON, agrunpando in a FormGroup and FormControl, in the JSON it continues sending true or false , any help on how to fix that?
– J. Edu
Nov 2 '17 at 23:30
Is there a way you can parse it ? I can't understand your current problem, !
– SHOHIL SETHIA
Nov 3 '17 at 9:20
add a comment |
19
This it what you are looking for:
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'A':'B')" />
Inside your class:
checkValue(event: any){
console.log(event);
}
Also include FormsModule in app.module.ts to make ngModel work !
Hope it Helps!
edited Nov 19 '18 at 18:55
Federico Grandi
2,70021127
answered Nov 2 '17 at 7:30
SHOHIL SETHIASHOHIL SETHIA
5531521
With your answer I can see that the value changes in the console ("A", "B"), but I have to add that in the registry I sent a JSON, agrunpando in a FormGroup and FormControl, in the JSON it continues sending true or false , any help on how to fix that?
– J. Edu
Nov 2 '17 at 23:30
Is there a way you can parse it ? I can't understand your current problem, !
– SHOHIL SETHIA
Nov 3 '17 at 9:20
add a comment |
19
19
19
This it what you are looking for:
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'A':'B')" />
Inside your class:
checkValue(event: any){
console.log(event);
}
Also include FormsModule in app.module.ts to make ngModel work !
Hope it Helps!
edited Nov 19 '18 at 18:55
Federico Grandi
2,70021127
answered Nov 2 '17 at 7:30
SHOHIL SETHIASHOHIL SETHIA
5531521
This it what you are looking for:
<input type="checkbox" [(ngModel)]="isChecked" (change)="checkValue(isChecked?'A':'B')" />
Inside your class:
checkValue(event: any){
console.log(event);
}
Also include FormsModule in app.module.ts to make ngModel work !
Hope it Helps!
edited Nov 19 '18 at 18:55
Federico Grandi
2,70021127
answered Nov 2 '17 at 7:30
SHOHIL SETHIASHOHIL SETHIA
5531521
edited Nov 19 '18 at 18:55
Federico Grandi
2,70021127
edited Nov 19 '18 at 18:55
Federico Grandi
2,70021127
edited Nov 19 '18 at 18:55
Federico Grandi
2,70021127
2,70021127
answered Nov 2 '17 at 7:30
SHOHIL SETHIASHOHIL SETHIA
5531521
answered Nov 2 '17 at 7:30
SHOHIL SETHIASHOHIL SETHIA
5531521
answered Nov 2 '17 at 7:30
SHOHIL SETHIASHOHIL SETHIA
5531521
5531521
With your answer I can see that the value changes in the console ("A", "B"), but I have to add that in the registry I sent a JSON, agrunpando in a FormGroup and FormControl, in the JSON it continues sending true or false , any help on how to fix that?
– J. Edu
Nov 2 '17 at 23:30
Is there a way you can parse it ? I can't understand your current problem, !
– SHOHIL SETHIA
Nov 3 '17 at 9:20
add a comment |
With your answer I can see that the value changes in the console ("A", "B"), but I have to add that in the registry I sent a JSON, agrunpando in a FormGroup and FormControl, in the JSON it continues sending true or false , any help on how to fix that?
– J. Edu
Nov 2 '17 at 23:30
Is there a way you can parse it ? I can't understand your current problem, !
– SHOHIL SETHIA
Nov 3 '17 at 9:20
With your answer I can see that the value changes in the console ("A", "B"), but I have to add that in the registry I sent a JSON, agrunpando in a FormGroup and FormControl, in the JSON it continues sending true or false , any help on how to fix that?
– J. Edu
Nov 2 '17 at 23:30
With your answer I can see that the value changes in the console ("A", "B"), but I have to add that in the registry I sent a JSON, agrunpando in a FormGroup and FormControl, in the JSON it continues sending true or false , any help on how to fix that?
– J. Edu
Nov 2 '17 at 23:30
Is there a way you can parse it ? I can't understand your current problem, !
– SHOHIL SETHIA
Nov 3 '17 at 9:20
Is there a way you can parse it ? I can't understand your current problem, !
– SHOHIL SETHIA
Nov 3 '17 at 9:20
add a comment |
11
Give a try on this,
Template
<input (change)="FieldsChange($event)" value="angular" type="checkbox"/>
Ts File
FieldsChange(values:any){
console.log(values.currentTarget.checked);
}
answered Nov 2 '17 at 6:07
balajivaishnavbalajivaishnav
1,09921425
add a comment |
11
Give a try on this,
Template
<input (change)="FieldsChange($event)" value="angular" type="checkbox"/>
Ts File
FieldsChange(values:any){
console.log(values.currentTarget.checked);
}
answered Nov 2 '17 at 6:07
balajivaishnavbalajivaishnav
1,09921425
add a comment |
11
11
11
Give a try on this,
Template
<input (change)="FieldsChange($event)" value="angular" type="checkbox"/>
Ts File
FieldsChange(values:any){
console.log(values.currentTarget.checked);
}
answered Nov 2 '17 at 6:07
balajivaishnavbalajivaishnav
1,09921425
Give a try on this,
Template
<input (change)="FieldsChange($event)" value="angular" type="checkbox"/>
Ts File
FieldsChange(values:any){
console.log(values.currentTarget.checked);
}
answered Nov 2 '17 at 6:07
balajivaishnavbalajivaishnav
1,09921425
answered Nov 2 '17 at 6:07
balajivaishnavbalajivaishnav
1,09921425
answered Nov 2 '17 at 6:07
balajivaishnavbalajivaishnav
1,09921425
answered Nov 2 '17 at 6:07
balajivaishnavbalajivaishnav
1,09921425
1,09921425
add a comment |
add a comment |
7
changed = (evt) => {
this.isChecked = evt.target.checked;
}
<input type="checkbox" [checked]="checkbox" (change)="changed($event)" id="no"/>
answered Aug 30 '18 at 7:37
Vadivel SubramanianVadivel Subramanian
10116
1
Please don't just dump a code block as an answer. A good answer explains the solution and gives some context.
– Sebastiaan
Aug 30 '18 at 7:46
add a comment |
7
changed = (evt) => {
this.isChecked = evt.target.checked;
}
<input type="checkbox" [checked]="checkbox" (change)="changed($event)" id="no"/>
answered Aug 30 '18 at 7:37
Vadivel SubramanianVadivel Subramanian
10116
1
Please don't just dump a code block as an answer. A good answer explains the solution and gives some context.
– Sebastiaan
Aug 30 '18 at 7:46
add a comment |
7
7
7
changed = (evt) => {
this.isChecked = evt.target.checked;
}
<input type="checkbox" [checked]="checkbox" (change)="changed($event)" id="no"/>
answered Aug 30 '18 at 7:37
Vadivel SubramanianVadivel Subramanian
10116
changed = (evt) => {
this.isChecked = evt.target.checked;
}
<input type="checkbox" [checked]="checkbox" (change)="changed($event)" id="no"/>
answered Aug 30 '18 at 7:37
Vadivel SubramanianVadivel Subramanian
10116
answered Aug 30 '18 at 7:37
Vadivel SubramanianVadivel Subramanian
10116
answered Aug 30 '18 at 7:37
Vadivel SubramanianVadivel Subramanian
10116
answered Aug 30 '18 at 7:37
Vadivel SubramanianVadivel Subramanian
10116
10116
1
Please don't just dump a code block as an answer. A good answer explains the solution and gives some context.
– Sebastiaan
Aug 30 '18 at 7:46
add a comment |
1
Please don't just dump a code block as an answer. A good answer explains the solution and gives some context.
– Sebastiaan
Aug 30 '18 at 7:46
1
1
Please don't just dump a code block as an answer. A good answer explains the solution and gives some context.
– Sebastiaan
Aug 30 '18 at 7:46
Please don't just dump a code block as an answer. A good answer explains the solution and gives some context.
– Sebastiaan
Aug 30 '18 at 7:46
add a comment |
2
I am guessing that this is what something you are trying to achieve.
<input type="checkbox" value="a" (click)="click($event)">A
<input type="checkbox" value="b" (click)="click($event)">B
click(ev){
console.log(ev.target.defaultValue);
}
answered Nov 2 '17 at 5:59
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
@J. Edu : You can approve the answer if it has resolved your question. Thanks,
– AddWeb Solution Pvt Ltd
Nov 2 '17 at 7:17
add a comment |
2
I am guessing that this is what something you are trying to achieve.
<input type="checkbox" value="a" (click)="click($event)">A
<input type="checkbox" value="b" (click)="click($event)">B
click(ev){
console.log(ev.target.defaultValue);
}
answered Nov 2 '17 at 5:59
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
@J. Edu : You can approve the answer if it has resolved your question. Thanks,
– AddWeb Solution Pvt Ltd
Nov 2 '17 at 7:17
add a comment |
2
2
2
I am guessing that this is what something you are trying to achieve.
<input type="checkbox" value="a" (click)="click($event)">A
<input type="checkbox" value="b" (click)="click($event)">B
click(ev){
console.log(ev.target.defaultValue);
}
answered Nov 2 '17 at 5:59
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
I am guessing that this is what something you are trying to achieve.
<input type="checkbox" value="a" (click)="click($event)">A
<input type="checkbox" value="b" (click)="click($event)">B
click(ev){
console.log(ev.target.defaultValue);
}
answered Nov 2 '17 at 5:59
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
answered Nov 2 '17 at 5:59
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
answered Nov 2 '17 at 5:59
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
answered Nov 2 '17 at 5:59
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
12.6k1936
@J. Edu : You can approve the answer if it has resolved your question. Thanks,
– AddWeb Solution Pvt Ltd
Nov 2 '17 at 7:17
add a comment |
@J. Edu : You can approve the answer if it has resolved your question. Thanks,
– AddWeb Solution Pvt Ltd
Nov 2 '17 at 7:17
@J. Edu : You can approve the answer if it has resolved your question. Thanks,
– AddWeb Solution Pvt Ltd
Nov 2 '17 at 7:17
@J. Edu : You can approve the answer if it has resolved your question. Thanks,
– AddWeb Solution Pvt Ltd
Nov 2 '17 at 7:17
add a comment |
0
<input type="checkbox" value="a" (click)="clicked('A')">A
<input type="checkbox" value="b" (click)="clicked('B')">B
clicked(val){
console.log(val);
}
do want something like that?
answered Nov 2 '17 at 6:07
Imdad AliImdad Ali
383112
add a comment |
0
<input type="checkbox" value="a" (click)="clicked('A')">A
<input type="checkbox" value="b" (click)="clicked('B')">B
clicked(val){
console.log(val);
}
do want something like that?
answered Nov 2 '17 at 6:07
Imdad AliImdad Ali
383112
add a comment |
0
0
0
<input type="checkbox" value="a" (click)="clicked('A')">A
<input type="checkbox" value="b" (click)="clicked('B')">B
clicked(val){
console.log(val);
}
do want something like that?
answered Nov 2 '17 at 6:07
Imdad AliImdad Ali
383112
<input type="checkbox" value="a" (click)="clicked('A')">A
<input type="checkbox" value="b" (click)="clicked('B')">B
clicked(val){
console.log(val);
}
do want something like that?
answered Nov 2 '17 at 6:07
Imdad AliImdad Ali
383112
answered Nov 2 '17 at 6:07
Imdad AliImdad Ali
383112
answered Nov 2 '17 at 6:07
Imdad AliImdad Ali
383112
answered Nov 2 '17 at 6:07
Imdad AliImdad Ali
383112
383112
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47068222%2fangular-4-checkbox-change-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
your code?????????
– Saurabh Agrawal
Nov 2 '17 at 5:32