I want to assign the check box's value instead of true or false. How can i achieve this?
<input formControlName="ota" value="OTA" type="checkbox">
-
similar question stackoverflow.com/questions/43154299/…Anto Antony– Anto Antony2017-11-09 10:33:02 +00:00Commented Nov 9, 2017 at 10:33
-
but that doesnt work. i ' am using formcontrolKarty– Karty2017-11-09 10:42:41 +00:00Commented Nov 9, 2017 at 10:42
Add a comment
|
2 Answers
You can use a change event to then use patchValue (or setValue) to assign the $event.target.value if it's checked. If not, then assign something else. Here I assign an empty string:
<input formControlName="ota" (change)="$event.target.checked ?
otaCtrl.patchValue($event.target.value) : otaCtrl.patchValue('')"
value="OTA" type="checkbox">
where otaCtrl is a variable for your form control:
otaCtrl: FormControl;
// code...
this.otaCtrl = this.myForm.get('ota') as FormControl;
6 Comments
Erik Grosskurth
Just wanted to add here that I could only get your solution to work for one checkbox. With multiple dynamic checkboxes I had to write a function and sent the event and prop out to it.
Karty
Hi, can you answer my question stackoverflow.com/questions/47889068/…
Karty
could be helpful, if you can answer this.
AppDreamer
In your example, what is "myForm"? I don't see it declared.
AVJT82
@AppDreamer Well, OP didn't specify the name of the
FormGroup, so I used a pseudo name for the formgroup name, i.e myGroup. There is a demo attached to my answer, so you can also check that out :) |
I couldn't get the accepted answer to work with multiple dynamic built form checkbox elements. So based on that selected answer I did this (assuming the value for a checkbox was a boolean) :
export class DynamicFormComponent implements OnInit {
activeCtrl: FormControl;
...
updateCheckBoxVal(prop, eve) {
this.activeCtrl = this.form.get(prop.key) as FormControl;
this.activeCtrl.patchValue(eve.checked);
}
}
The HTML file:
<label *ngSwitchCase="'checkbox'" [attr.for]="prop"> {{prop.label}}
<input
[formControlName]="prop.key"
[id]="prop.key"
[type]="prop.type"
[checked]="prop.value"
(change)="updateCheckBoxVal(prop, $event.target);"
/>
</label>
Hope this helps someone, and thanks to @AJT_82 for the inspiration
1 Comment
anonymous
may be you can answer my question, stackoverflow.com/questions/65429846/…