I have simple date object made in JS and I don't know why AngularJS can't bind it to the input control(Probably the problem is the format of date) but please explain me it. The sample problem occurs when I return Json object which contains date.
View:
<div ng-controller="MyCtrl" ng-app>
<input type="date" ng-model="dateVal" />
<hr/>
{{dateVal}} </br>
</div>
Controller:
function MyCtrl($scope) {
$scope.dateVal = new Date(2013, 06,07);
}
Entire example is placed
here - jsfiddle
The input control doesn't appear to bind to a date object, but a string object.
Change your dateVal to a string like
$scope.dateVal = "2013-06-07";
See this fiddle http://jsfiddle.net/2BZV4/2/
Related
Learning Typescript and trying to build a simple textbox that displays the text once submitted.
Am able to capture the input great and and now trying to report it back to the user.
The problem is on compilation typescript gives this error message:
Property 'value' does not exist on type 'HTMLDivElement'.
Am simply trying to assign the value of the div messageList to print the array (don't care about formatting yet).
I have been searching the web and most I can find says it must be naming error, i tried changing the name to 1 and still no joy.
Have attempted to use general HTML element in the cast but no joy.
The TS code:
let messages = [];
class Message {
content: string;
constructor(
public message: string
){
this.message = message
}
}
function post(message: string){
var text = (<HTMLInputElement>document.getElementById("messageInput")).value;
const newPost = new Message(text)
messages.push(newPost.message)
console.log(messages)
this.report(newPost)
}
function report(message: Message){
(<HTMLDivElement>document.getElementById("messageList")).value = messages
}
the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Typescript Messages</title>
</head>
<body>
<textarea id="messageInput" type="text" name="message" rows="15" cols="40"></textarea>
<button id="submitButton" type="submit" value="submit" onclick="post()">Post</button>
<div id="messageList" value="">Hello rubhy</div>
<script src="message.js"></script>
</body>
</html>
Any help would be appreciated, thank you
function report(message: Message){
(<HTMLDivElement>document.getElementById("messageList")).value = messages
}
You need to cast it as HTMLInputElement as you done with text in post function:
function report(message: Message){
(<HTMLInputElement>document.getElementById("messageList")).value = messages
}
The HTMLDivElement type doesn't have the value property, so that's why you get that error.
EDIT: I just saw that messageList is a <div>. Div cannot contain a value property. For custom properties, use data-*
https://www.w3schools.com/tags/att_data-.asp
i have an Angular Factory that gets a single date from the backend of my spring application, and i wanted to add it to an Input so the calendar input is always set with the date obtained from the backend, without the possibility for the user to change it. How could i achieve this? Should i put it on my controller or directly on the button? This is my code:
Factory(concatenated with other .factory):
.factory('DataInizioGeneraCalendario', function ($resource) {
return $resource('rest/anagrafica/dataInizioGeneraCalendario', {
get: {
method: 'GET'
}
});
Controller Function:
$scope.generaCalendario = function () {
$scope.modificaCalendarioDiv = true;
$scope.successMessage = false;
$("#idModificaCalendarioDiv").hide();
$scope.element = new Calendario();
autoScroll('generaCalendario');
$("#idErrorTemplate").hide();
$('#data').attr('disabled', false);
$("#idGeneraCalendarioDiv").show();
};
Input :
<div class="col-xs-12 col-md-2" >
<label for="dataInizio" class="row col-xs-12 control-label" style="text-align: left">da Data</label>
<input class="datepicker form-control" placeholder="gg/mm/aaaa" required type="text" id="data" ng-disabled="true" />
</div>
Edit : forgot to add, the controller function is called by the button that displays the input for the calendar.
Because your factory's GET request will return the date value asynchronously, it's better to have a $scope.date in your controller that will hold the date value that is returned from the server. Also, depending on the format in which you store dates on the backend, you might need to transform the value that is returned from the backend into the string format, so it would be properly consumed by the <input type="date"> as per Angular docs.
In your code, you need to bind the input element to this value, like this: <input ng-model="date">.
What it will do is bind this input to the data model, so that every time when user edits the input the $scope.date would be updated too.
If you do not want users to be able to edit this date, then you need to:
Keep the input field disabled <input disabled> (no need to use ng-disabled here, because you want to keep it always disabled). And also remove this line: $('#data').attr('disabled', false); in your function.
You the one-way binding, instead of two0way binding, like this: <input disabled ng-value="date">
Here is the working DEMO that shows two inputs: one that is editable and another that is not.
I am working on angularJS and Html,
from my angularJs side I am getting two fields they are
name.firstname, name.lastname,
So in my html i will be able to display it like this
<div>{{name.firstname}}-{{ name.lastname}}</div>
but i want to display these two values in a single text box separated by ","
I tried as given below but it is not working
<div><input type ='text' ng-model ="name.firstname" , "name.firstname"/></div>
please suggest me how to do this in a simple way without using any directives
In this case you can assign model to your input and assign it the sum of fname and lname:-)
<div ng-controller="MyCtrl">
<div>
<input type ='text' ng-model ='name'"/>
</div>
</div>
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.fname = 'raciit';
$scope.lname = 'gulati';
$scope.name=$scope.fname+$scope.lname;
}
Fiddle
Here is a form with angularjs.
<!DOCTYPE html>
<html lang="en">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="formController">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user }}</p>
</div>
<script>
function formController ($scope) {
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
</script>
</body>
I am not familiar with AngularJS, I found the expression {{user}} display as a json like format data which was binded to the textbox. I want to know is there any way to post {{user}} as json directly to the server side. I know I can easily post the form. But my purpose is the page may have a lot of textbox. I want to store it using json, just like {{user}} and submit as a combined one.
And I also want to know how to remove one value in the expression. i.e. the following code has two attribute firstName and lastName. Is there a way like remove(), after call it. I can remove one attribute in the correspond json data.
Thanks a lot
you can post your modal (user in this case) directly as JSON using $http .
In case all you text fields are saved in the user modal then u can remove one of the attributes by calling the below function before submitting the form
$scope.remove = function (user) {
delete $scope.user.firstName;//the output here is user with only lastname
}
According to the Docs input[time]: https://docs.angularjs.org/api/ng/input/input%5Btime%5D
it should be enough to use the input type time and bind it to a date oject, however it doesn't work as I'd expect it.
<input ng-model="time" type="time" placeholder="HH:mm" min="08:00" max="17:00" required >
and
$scope.time = new Date();
as a Result I'd like to see just the HH:mm within the input field.
Here's a jsfiddle to play around:
http://jsfiddle.net/U3pVM/7314/
I think you need at least Angular 1.3.0 beta for this to work, as it looks like it was introduced then.
Changelog:
...
Features
input: support types date, time, datetime-local, month, week
(46bd6dc8, #5864)
....
You could achieve that, follow my code,
http://plnkr.co/edit/60aiH0eJ8ee0FlEsQE2m?p=info
Basically i use momentjs, and set seconds and milliseconds to zero, that way browser will not render that.
moment().second(0).milliseconds(0).toDate();
Here's an example of how to use input="time" with angularJS and bind it using ng-model directive
HTML: <input type="time" ng-model="myTime"/>
in the controller, we assign time came from database to date a new object
$scope.myTime = new Date(response.data.start_time);
this will parse the full date as a time HH:MM:SS Successfully
Change $scope.time = new Date(); in your code to:
var d = new Date();
$scope.time = d.getHours() + ':' + d.getMinutes();
Working code: http://jsfiddle.net/bitsmith/asjv8ycq/1/
AngularJS Element Directive input[time] is used to create HTML time input with time validation and transformation.
The input must be provided in the format ISO-8601, i.e local time format HH:mm:ss, for example 15:35:10
The data model must be a Date Object, timezones used to read/write Date instance are defined using ngModel
Syntax
<input type="time"
ng-model="string"
[name="string"]
[min="string"]
[max="string"]
[required="string"]
[ng-required="string"]
[ng-change="string"]>
Use following code to bind time and for getting other attribute related to input type time.
<!doctype html>
<html lang="en">
<head>
<title>AngularJS Directives : input[time]</title>
<script src="angular.js"></script>
<style>
b{font-family:Papyrus; color:#fa4b2a; font-size: 20px;}
</style>
</head>
<body ng-app="timeDemo">
<script>
angular.module('timeDemo', [])
.controller('timeController', ['$scope', function($scope) {
$scope.sample = {
value: new Date(1999, 0, 1, 15, 30, 0)
};
}]);
</script>
<form name="demoForm" ng-controller="timeController as timeCtrl">
<label for="sampleInput">Select a time from 6 am to 6 pm</label>
<input type="time" id="sampleInput" name="input" ng-model="sample.value"
placeholder="HH:mm:ss" min="06:00:00" max="18:00:00" required />
<!-- min 6 am and max 6 pm i.e 18:00 -->
<div role="alert">
<span class="error" ng-show="demoForm.input.$error.required">
Input is Required!</span>
<!-- Required Error -->
<span class="error" ng-show="demoForm.input.$error.time">
Input Date is not Valid!</span>
<!-- Validation Error -->
</div>
<i>value = <b>{{sample.value | date: "HH:mm:ss"}}</b></i><br/>
<i>demoForm.input.$valid = <b>{{demoForm.input.$valid}}</b></i><br/>
<i>demoForm.input.$error = <b>{{demoForm.input.$error}}</b></i><br/>
<i>demoForm.$valid = <b>{{demoForm.$valid}}</b></i><br/>
<i>demoForm.$error.required = <b>{{!!demoForm.$error.required}}</b></i><br/>
</form>
</body>
</html>
Below will ensure your input always has HH:mm format.
$scope.time = return new Date(date.getFullYear(), date.getMonth(), date.getDate(),
date.getHours(), date.getMinutes());
Additionally, a function can be written in the controller end to format all Date values to be fed in time input
getFormatDate = function (val) { // assuming val is date like "/Date(946673340000)/"
if (val != undefined) {
date = new Date(val.match(/\d+/)[0] * 1); // creating a date object from val
return new Date(date.getFullYear(), date.getMonth(), date.getDate(),
date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
}
}