I have the following radiobuttons:
<div class="nextgen-goal-overall-radiobuttons pull-left">
<label class="nextgen-input-label">Overall Goal</label>
<div class="radio-button-item pull-left" *ngFor="let goalType of goalTypesRadioButton">
<p-radioButton class="nextgen-radio-button" name="{{goalType.id}}" value="{{goalType.id}}" label="{{goalType.description}}" [(ngModel)]="selectedGoalTypeId"></p-radioButton>
</div>
</div>
When I click on any radio button the selectedGoalTypeId is updated with the corresponding value.
My problem here is that on my HTML I have the following conditional divs:
<div class="nextgen-input-container nextgen-goal-input pull-left">
<span *ngIf="selectedGoalTypeId === 1" class="goals-currency-icon">{{currencyFormat}}</span>
<label class="nextgen-input-label nextgen-target-group-label">{{selectedGoalTypeId}}</label>
<input class="nextgen-input" [class.nextgen-input-budget] = "selectedGoalTypeId === 1" type="number" pInputText placeholder="">
</div>
<div *ngIf="selectedGoalTypeId === 3" class="nextgen-goal-frequency-dropdown pull-left">
<label class="nextgen-input-label nextgen-target-group-label">Frequency</label>
<p-dropdown [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" dropdownIcon="fa fa-angle-down" class= "nextgen-dropdown" [options]="FrequencyLookup" [(ngModel)]="selectedFrequency" value="selectedFrequency"></p-dropdown>
</div>
Asking if selectedGoalTypeId is 1 or 3 it shows some divs or not.
The problem here is that the selectedGoalTypeId is updated correctly. I put some label on the HTML to check. But the divs are not changed according to the conditions it always displays the same despite of the value of selectedGoalTypeId. What I'm missing here?
In p-radioButton change value="{{goalType.id}}" to [value]="goalType.id"
And I suppose that *ngIf="selectedGoalTypeId === 1" should be placed on the upper div than on the span
Posted the solution Here
PS : I guess goalType.id and selectedGoalTypeId are both number
Related
I'm new to angular, working on a small project. I completed the UI for the component and that is fine. I'm using reactive form.
this.questionForm = this._formBuilder.group({
question : ['',[Validators.required]],
options : this._formBuilder.array([
this._formBuilder.control({value:'',disabled:false},[Validators.required]),
this._formBuilder.control({value:'',disabled:false},[Validators.required])
]),
answers : this._formBuilder.array([
this._formBuilder.control({value:'',disabled:false}),
this._formBuilder.control({value:'',disabled:false})
])
})
And this is UI part where I'm facing this problem
<div formArrayName="options" class="form-group col-sm-6" *ngFor="let option of options.controls;let i=index;let temp=option as FormGroup">
<div class="d-flex">
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" [formControlName]="i" value="some" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" [formControlName]="i" class="form-control" [class.is-invalid]="option.invalid && option.touched" [placeholder]="'option '+(i+1)">
</div>
<button class="text-danger remove-btn" (click)="removeOption(i)" *ngIf="enableRmBtn">X</button>
</div>
<small *ngIf="option.invalid && option.touched" class="text-danger">Oops!! Cannot be an empty option</small>
</div>
The text input is working fine, but for implementing the checkbox I have no idea how to achieve it.I cannot give the same value for the formControlName for checkbox input. I just want the checkboxes that are select by the user.
Hoping for a solution. Thanks in advance.
This is my HTML code. It's a custom DropDownList that I made. Can someone advise how I could set one of the options to be checked by default in this case below?
<div class="dropdownlistheader" ng-click="toggle('subdiv','item')">
<input type="text" readonly="readonly" class="dropdownlistinput" value="{{selectedItemValuesDisplay}}" />
</div>
<div id="ddl123" ng-show="showItemOptions" class="dropdownlist">
<div ng-show="showItemOptions" ng-repeat="option in ItemTypeDDL">
<input type="checkbox" ng-model="selected[$index]" ng-click="toggleItemSelection(option.TypeID, option.TypeName)"> {{option.TypeName}}
</div>
</div>
Based on the limited details provided in the questions, I'll suggest the following:
<div id="ddl123" ng-show="showItemOptions" class="dropdownlist" ng-init="selected[0] = true">
<div ng-show="showItemOptions" ng-repeat="option in ItemTypeDDL">
<input type="checkbox" ng-model="selected[$index]" ng-click="toggleItemSelection(option.TypeID, option.TypeName)"> {{option.TypeName}}
</div>
</div>
The ngInit directive will select the first element in the selected flags list, by setting the first index of the array to true
I am generating checkboxes trough ng-repeat , for all columns of some grid
<div ng-repeat="(key, val) in gridData[0]">
<!--<label>{{columnShowSelect[1].columnNumber}}</label>-->
<div class="section col-md-6">
<label>
<u>
<h5>{{key}}</h5>
</u>
</label>
</div>
<div class="section col-md-4">
<u>
<label class="block mt15 option option-primary">
<input type="checkbox" id="chbEnableCol" name="chbColumnName" value="{{$index+1}}" ng-checked="columnShowSelect[{{$index}}].columnNumber == {{$index+1}}" />
<span class="checkbox"></span>Enable this column</label></u>
</div>
</div>
I also want to check checkboxes which i have already decided to be checked , so i am getting json with columnNumbers , that is columnShowSelect.columnNumber ,but for some reason it doesnt check it , if i put {{columnShowSelect[$index].columnNumber}} and go inspect element of checkbox , i can clearly see that it says ng-checked= "1 == 1" , but checkbox is not checked , any help ?
You don't need {{}} in ng-checked because it takes JavaScript expression.
ng-checked="columnShowSelect[$index].columnNumber == $index+1"
I am having trouble getting the reset button to clear checkboxes on a Foundation 4 custom form. I haven't found anything specifically talking about this issue so far. I found this post (which is Foundation 5): http://foundation.zurb.com/forum/posts/3317-refresh-form-on-click-of-cancel-button , which is slightly similar to my issue.
I modified the Codepen in the zurb forum above to help troubleshoot the issue to demonstrate my problem. As you can see, the reset button does not clear the checkbox. If I remove the "custom" class, the reset works. However, the look and functionality of the form relies on the custom class, so that's not an option.
http://codepen.io/jdkoelsch/pen/jzLgB
Here is the code from Codepen (stack overflow wants me to include code if I link to codepen.io)
<form class="custom" data-abide>
<div class="row">
<div class="small-12 medium-6 columns field1">
<label for="field1">Field1 <span class="required">Required</span>
<input id="field1" maxlength="20" name="field1" type="text" required pattern="alpha" placeholder="Field1">
<small class="error">Please enter something valid.</small>
</label>
</div>
<div class="small-12 medium-6 columns field2">
<label for="field2">Field2 <span class="required">Required</span>
<input id="surname" maxlength="20" name="field2" type="text" required pattern="alpha" placeholder="Field2">
<small class="error">Please something valid.</small>
</label>
</div>
<div class="small-12 medium-6 columns field3">
<label for="field3">Field23 <span class="required">Required</span>
<input id="chkbox" name="field3" type="checkbox">
<small class="error">Please something valid.</small>
</label>
</div>
</div>
</form>
<div class="row">
<button class="clear">Clear</button>
</div>
Is there anything I can do (besides updating to Foundation 5) to get the reset button to work?
Looks like in your codepen example your not choosing the right selector, try "form div label". Also set the focus_on_invalid:false. Try the js below -
$(document).foundation({
abide : {
live_validate : true,
focus_on_invalid : false
}
});
$(".clear").on("click",function(){
$("form")[0].reset();
$("form div label").removeClass("error");
});
I have the following html
<div class="row">
<div class="col-lg-6">
<label class="radio">
<input type="checkbox">
</label>
</div>
<div class="col-lg-1">
<input type="text" disabled="" class="col-lg-2 form-control" name="notes_33">
</div>
</div>
there is an on click event on the checkbox input in "col-lg-6" div, i want to get the value input text under "col-lg-1", here is my way to get it
$("#medication").on('click', ':checkbox', function(){
var $note = $(this).parent().parent().siblings('.col-lg-1').find(":text");
//... change the value of $note
});
is my way is good? is there any better way to traverse to the input filed starting from the check box?
This looks like simpler:
$(this).closest('.row').find(':text')
Edit:
Here is the comparisons between closest and parents:
http://jsperf.com/jquery-parents-vs-closest