In my typescript code I am just importing the => { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
I have this html codel:
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker>
</div>
The result is:
what I have.png
I want the basic calendar to begging form 2004.
Something like: what I want.png
How can I change the first year that pops-out to be 2004 instead of 2020?
If there is no value set for the datepicker it will default to the current date. This is what you see happening in your example.
What you can do is inside the html template add the [bsValue]="dateForDatepicker" attribute to your bsDatepicker input element.
<input type="text"
placeholder="Datepicker"
class="form-control"
bsDatepicker
[bsValue]="dateForDatepicker"
>
In the component you can then add dateForDatepicker = new Date("01-01-2014") which should cause the datepicker to display that value initially.
For more information you can check the documentation: https://valor-software.com/ngx-bootstrap/#/datepicker#date-initial-state
Related
While performing the edit operation using angular 13, I'm using HTML input type date. When fetching a date from the database, it is not showing the date in the textbox. Kindly help me.
update-movie.component.html
<div class="mb-2">
<label>Release Date</label>
<input type="date" name="releaseDate" class="form-control" [(ngModel)]="movieService.movieData.releaseDate"
#releaseDate="ngModel" [value]=movieService.movieData.releaseDate required
[class.is-invalid]="releaseDate.invalid && releaseDate.touched">
</div>```
I found the answer, instead of [value] I used [ngModel] and applied date pipe.
<label>Release Date</label>
<input type="date" name="releaseDate" class="form-control" [(ngModel)]="movieService.movieData.releaseDate"
#releaseDate="ngModel" [ngModel]="movieService.movieData.releaseDate | date : 'yyyy-MM-dd'" required
[class.is-invalid]="releaseDate.invalid && releaseDate.touched">
</div>
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
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 want to perform this operation but value attribute is not working
<input name="grand_total" type="text" class="form-control" value="#{{sum(saletemp)*discount1/100 | currency: "৳"}}" />
<input name="discount" type="text" class="form-control" id="add_payment" ng-model="discount1"/>
Second question
If I want to send value from a P tag after html form submission, how can I do that and how can I retrieve that value?
I want to pass this value #{{sum(saletemp)*discount1/100 | currency: "৳"}} to my controller and want to store it into my database. Here is the code portion
<div class="form-group">
<label for="grand_total" class="col-sm-4 control-label">Discount</label>
<div class="col-sm-8">
<p class="form-control-static" ><b>#{{sum(saletemp)*discount1/100 | currency: "৳"}}</b></p>
</div>
</div>
You should use ng-model instead of dealing with the value attribute of input tag... That will provide you more flexibility for doing almost any kind of operation over it and accessing it in controller..
like ng-model="saletemp" will be available to you in controller as $scope.saletemp.. and if you want to call functions on some change in input tag value, you can simply call ng-change="functionName()" which you will have defined in controller as
$scope.functionName = function(){YOUR FUNCTION DEFINITION}
Here is the fiddle which will allow you to put the currency in input tag when ng-model is used. http://jsfiddle.net/arunpjohny/wNBAn/
This question already has answers here:
How to have a default option in Angular.js select box
(23 answers)
Closed 7 years ago.
I am almost new to AngularJS, and I am using a select tag for selection . What I want is to have a default value (i.e admin) for my select tag to define the role of my user which are agent and admin
Here is my HTML codes:
<div class="row">
<div class = "form-group col-xs-12 col-md-6">
<label>
Role
</label>
<select class="form-control" ng-options="value for value in roles" ng-model="newStaff.role_name='agent'"></select>
</div>
</div>
and here is my controller codes:
controllers.controller('StaffMembersNewCtrl', function ($scope, StaffMembers, $state) {
$scope.roles = ['admin', 'agent'];
StaffMembers.query(function(responce) {
$scope.staffs = responce;
});
$scope.SaveNewStaffMember = function(){
StaffMembers.save($scope.newStaff, function(){
$scope.addAlert('success', 'New staff member was added successfully!');
$state.go('staffMembersSettings');
});
};
});
It seems working, I have a default value, and data is bind, but there is an error in browser.
Error: [ngModel:nonassign] Expression 'newStaff.role_name='agent'' is non-assignable. Element: <select class="form-control ng-pristine ng-untouched ng-valid" ng-options="value for value in roles" ng-model="newStaff.role_name='agent'">
I understand this error, but I can not find an alternative solution for my problem which is putting a default value for my select tag.
You can define your default in JS or HTML. The way you're trying to use ng-model suggests you want to define the default in HTML. ng-init would be one way to do that (you're actually using ng-model the way one would use ng-init). Think of ng-model as a kind of "address" that points angular to WHERE you want to store the selection, not WHAT you want to store in there.
Since your data model is in JS, I suggest you do it there instead so that you can reference the appropriate role name in $scope.roles
HTML
<select class="form-control" ng-options="value for value in roles" ng-model="newStaff.role_name"></select>
CONTROLLER
$scope.newStaff = {role_name: $scope.roles[0]};
Try this..
<div class="row">
<div class = "form-group col-xs-12 col-md-6">
<label>
Role
</label>
<select class="form-control" ng-options="value for value in roles" ng-model="newStaff.role_name" ng-init="newStaff.role_name=roles[1]"></select>
</div>
</div>