I want to implement a checklist in Angular. Some boxes have to be pre-checked based on an array in the ts file and the array has to be updated when a checkbox is checked. I am doing it like:
<div class='form-group que-box' *ngFor="let option of currentQuestion.options">
<input type="checkbox" aria-label="Checkbox 1" [value]="option.text" name="checkBox" [(ngModel)]="optionsSelectedArray"/>
<label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>
optionsSelectedArray contains the option IDs retrieved from server.
But it doesn't work. All the checkboxes come checked when the the division is rendered.
EDIT
I have changed my code as follows :
<div class='form-group que-box' *ngFor="let option of currentQuestion.options">
<input type="checkbox" id="{{option.optionId}}" name="checkBox" [(ngModel)]="option.userResponse" (ngModelChange)= "setResponseChanged()">
<label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>
Here option.userResponse in boolean. Now on selecting the checkboxes the currentQuestion object is correctly changing but when the checklist loads for the first time, the checkboxes are not checked correctly.All the checkboxes come checked if the option.userResponse is true for the last item ,none come checked otherwise.
Perhaps this might do what you want
<div class='form-group que-box' *ngFor="let option of currentQuestion.options; let i=index">
<input type="checkbox" aria-label="Checkbox 1" name="checkBox" [(ngModel)]="optionsSelectedArray[i]"/>
<label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>
(I added ; let i=index and [i])
Related
How to make one button default radio button when html code does not contain options directly, data coming directly from server.
In my project I have one radio button field "Applies To".
The radio button options are not mentioned in the code as you see, I should make one option select by default, if options are not directly mentioned in the code.
How can I make one button default in this case?
<div class="row row-margin">
<label style="margin-top: 34em;margin-left: -1em;">Applies To:</label>
<label class="input" *ngFor="let question of QuestionnaireAppliesTo">
<label class="radio">
<span class="tableCellDisplay customRadioInline">
<input type="radio" [(ngModel)]="questionnaire.EntityTypeUniqueID"
name="AppliesTo" class="radio-custom" [value]="question.UUID" id="type_{{question.UUID}}">
<label for="type_{{question.UUID}}" class="radio-custom-label">{{question.Name}}</label>
</span>
</label>
</label>
</div>
My typescript code:
getQuestionnaireCategories() {
this.lookupValues.then((response: any) => {
this.QuestionnaireAppliesTo = response.QUESTIONNAIRECATEGORIES;
});
};
How to validate checkboxes for at least one selected error message. I tried, but it's not working. Link to my project
app.component:
<form [formGroup]="form" (ngSubmit)="submit()">
<label formArrayName="orders" *ngFor="let order of orders; let i = index">
<input type="checkbox" [formControlName]="i">
{{order[i].name}}
</label>
<div *ngIf="???">At least one order must be selected</div>
<br>
<button [disabled]="!form.valid">submit</button>
</form>
Hope you can help me regarding webscraping via VBA. In a webform I have to check and uncheck checkboxes using VBA. Now I run into the difficulty that some checkboxes have the same ID but reside in different classes.
Example:
Class "filter" has a checkbox with ID "start_date" and class "return_fields" has a checkbox with ID "start_date". When using .getElementByID("start_date") both checkboxes switch simultaneously.
But in this case I want to have the checkbox in class "filter" to be checked and the one in "return_fields" to be unchecked.
So I've attempted something like
.getElementsByClassName("filter")(0).getElementById("start_date").checked = True
.getElementsByClassName("return_fields")(0).getElementById("start_date").checked = False
Unfortunately this returns an error "Object doesn't support this property or method".
Here is the content of the element I get with .getElementByClassName("filter"):
<legend>Date Mode</legend>
<div class="start_date required">
<label for="active_date">Start Date</label>
<input name="date_mode" class="radio" id="start_date" type="radio" checked="checked" value="start_date">
</div>
<div class="report_date required">
<label for="report_date">Report Date</label>
<input name="date_mode" class="radio" id="report_date" type="radio" value="report_date">
</div>
<div class="end_date required">
<label for="end_date">End Date</label>
<input name="date_mode" class="radio" id="end_date" type="radio" value="end_date">
</div>
I have an angular 2 application, where i use a ngFor to handle an bunch of checkboxes. when i initialize this component i need to set the state of the checkbox based on weather an id excists in an array
<div *ngFor="let option of listOptionResponse.options" class="col-md-12">
<div class="col-lg-12">
{{option.headline}}
</div>
<div class="col-lg-2 col-md-2 ">
<input type="checkbox" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose">
</div>
</div>
In the component i have an array and if the options.id exists in this array i wanna set it to true.
I cannot think of a good way to do this, and i have been looking for some sort of init event to use, bu without luck.
(this has nothing to do whith the excisting (change) event)
I hope you can help, and thanks in advance
You can just bind to checked like
<input type="checkbox" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose"
[checked]="ids.indexOf(option.id) != -1">
Perhaps you could try this:
<input type="checkbox" [(ngModel)]="option.id" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose">
I have a form on my webpage and its being submitted to a NodeJS backend.
I'm having trouble with the checkboxes. When the are submitted to server, and I read them via req.body.foods, I get something like ['on', 'on', 'on'].
But I want to get the actual values, that is, something like ['dairy', 'fish'] etc.
How can I do that?
<div class="col-sm-6">
<div class="checkbox">
<label><input name="food" type="checkbox" value="dairy">Dairy</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="meat">Meat</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="fish">Fish</label>
</div>
</div>
You can do the following in the node.js file:
console.log(req.body.food); //This will print the array of values.
If you have only one checkbox selected in the page, (eg: Dairy) it will print "dairy". If more than one checkbox, then you get "{ 'dairy', 'meat' }" in the output. Make sure the checkboxes are within the form.
Another method:
Include a hidden input element in your form:
<input name="SelectedValues" type="hidden" value="">
Also include a call to a javascript file in the onchange event of every checkbox, or in the onclick event of the submit button in the form.
onclick='buildlist("YourCheckBoxName","SelectedValues");'
Use a javascript function to loop through your checkbox and build a comma separated list of selected values:
function buildlist(listName,labelName){
var controls = document.getElementsByName(listName);
var label = document.getElementsByName(labelName);
label.value = '';
for(var i=0;i<controls.length;i++){
label.value += controls[i].value.toString()+',';
}
}
Now inside the node.js file, use the following code to access the list of values:
req.body.SelectedValues
Looks like you are using bootstrap to generate your form checkboxes. Try using the "form-check" and "form-check-input" classes instead.
<div class="form-check">
<input class="form-check-input" type="checkbox" name="food" value="dairy" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">Dairy</label>
</div>