I have a form and I want to set some default values to be shown inside it. I have tried the following code:
<h3>ِStart Time</h3>
<div class="row" >
<div class="col">
<label for="startTime">Hour(s) </label>
<input type="number" [ngModel]="defaultSTime" class="form-control" name="StartTimeHour" value="card.startTime.getHours" id="startTime" min="0" max="23">
</div>
<div class="col">
<label for="startTime">Minute(s) </label>
<input type="number" [ngModel]= "defaultSMinute" class="form-control" name="StartTimeMin" value="card.startTime.getMinutes" id="startTime" min="0"max="59"> <!--input type can be changed accordingly-->
</div>
</div>
defaultSTime = 'card.startTime.getHours' ;
defaultSMinute = 'card.startTime.getMinutes';
this is supposed to work but it only shows me the empty box. where is the problem?
Not sure if this is the issue but from your definition of defaultSTime and defaultSMinute, they are strings while your inputs are defined as number type.
If you're trying to get a number from card object card.startTime.getHours, change your definition to:
defaultSTime = card.startTime.getHours;
defaultSMinute = card.startTime.getMinutes;
This will help you :
[
Also, to make it two way binding, keep banana-in-a-box for ngModel, i.e :
[(ngModel)]= "defaultSMinute"
There, is not much clarity in your comments - how you are constructing Card object, but i believe you missed following:
getHours() ; // these are functions of date not properties
Related
I have A form with several Items, including some check boxes that need to receive their status from the data service/ a model.
<div class="col">
<label for="expired">IsExpired</label>
<div>
<input type="checkbox" id="expired" disabled>
</div>
</div>
this is in the class of card.model.ts
expired: boolean;
and data.service.ts:
new CardModel('4',new Duration(2, 0), new LessonModel('#5DC878', 'Bialogy'), 'just the first part', false,true,new Date(2018,11,11,13,30),new Date(2018,11,11),true,false)
I have tried to put [(ngModel)] = "expired" into the input tag but I receive an error:
Can't bind to 'ngModel' since it isn't a known property of
'input'
what is the problem?
Try this:-
html
<div class ="col">
<label for="expired">IsExpired</label>
<div>
<input type="checkbox" id="expired" [checked]="checkedStatus">
<input type="checkbox" [(ngModel)]="checkedStatus" name="ele_name"/> <=== add name
</div>
</div>
ts
checkedStatus = true;
I have an array like below
standardInput:any = [{val:'1'},{val:'2'},{val:'3'}];
When i loop it in my view
<div class="form-group row text-right" *ngFor='let row of standardInput' >{{row.val}}
<label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label>
<div class="col-sm-9 form-control-label m-t-5" for="password-h-f">
<div class="row">
<div class="col-sm-9" >
<input class="form-control" name="roles" [formControl]="form.controls['service_standard_sub_heading']" [(ngModel)]="row.val" id="email-h-t" type="email">
</div>
<div class="col-sm-3">
<button class="btn btn-danger" (click)="removeInputs('standard',i)">Remove</button>
</div>
</div>
</div>
</div>
The output is :3 3 3,it is showing only the last object in the array for the 3 iterations.I am not able to understand what's the reason.Can anyone please suggest help.Thanks.
I believe you are using template-driven form, if not, let me know and we can look at a solution for model-driven form :)
In forms, the name attribute needs to be unique. Even though the ngModel is unique, Angular doesn't really care about it, but looks at the name attribute instead. Since you are using a template-driven form and ngModel, I see no need to use formControl here, you can just rely on the the ngModel and name attribute instead. So, to get the unique name attribute, we can bind the row.val to it, like so:
[name]="row.val"
So your complete template would look like this:
<form #form="ngForm">
<div class="form-group row text-right" *ngFor='let row of standardInput'>
<input class="form-control" [name]="row.val" [(ngModel)]="row.val">
</div>
</form>
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">
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 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