I have this markup
how can i reset it in my corresponding component?
<form name="voiceForm" novalidate>...</form>
I have tried:
this.voiceForm.$setPristine();
self.voiceForm.reset();
but got an error voiceForm is not defined.
this is my component:
(function (app) {
app.component('voiceFormComponent', {
templateUrl: 'partials/voice-form.html',
controller: ['$scope', '$state', '$stateParams',
function ($scope, $state, $stateParams) {
var self = this;
console.log("in voice prompt component");
self.addVoice = function () {
self.voiceForm.$setPristine();
$state.go("add");
}
You can pass the form and call setPristine
var app = angular.module('formReset', []);
app.controller('MainCtrl', function() {
this.data = {
name: ''
};
this.reset = function(form) {
this.data.name = '';
form.$setPristine();
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="formReset">
<head>
<title>form.$submitted</title>
<script src="http://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as ctrl">
<form name="form" novalidate>
<input name="name" ng-model="ctrl.data.name" placeholder="Name" required />
<input type="submit" />
<button type="button" class="button" ng-click="ctrl.reset(form)">Reset</button>
</form>
<pre>
Submitted: {{form.$submitted}}
</pre>
</div>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="myfrom">
<input type="text" ng-model="data.name">
<input type="text" ng-model="data.phone">
<input type="text" ng-model="data.city">
<input type="button" ng-click="reset_from()" value="reset">
</form>
{{data}}
</body>
</html>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = {name:"Sahed sawon",phone:"8801714999720",city:"Dhaka"};
$scope.reset_from = function() {
$scope.data = {};
}
});
</script>
I had a similar problem when I had a form within a form (which isn't allowed) and the fix was to use ng-form for the sub-form instead. Perhaps try ng-form?
Related
Having this js fiddle
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
$scope.value1 = $scope.value1;
$scope.value2 = "this is it: " + $scope.value1;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div ng-controller='MyController'>
<h1>Introduce your value:</h1>
<input type="text" ng-model="value1"></input></br>
<input type="text" ng-model="name" ng-change="value1"></input>
</div>
</html>
I want to introduce a value in the first input and to get it into the next one as "this is it: firstvalue".
You can achieve that easily using ng-change and using ng-model properly
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
$scope.value1 = undefined;
$scope.value2 = undefined;
$scope.onValue1Change = function(){
$scope.value2 = "this is it: " + $scope.value1;
};
}
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div ng-controller='MyController'>
<h1>Introduce your value:</h1>
<input type="text" ng-model="value1" ng-change="onValue1Change()"></input></br>
<input type="text" ng-model="value2"></input>
</div>
</html>
By using the advanced settings page.
And I try, depending on the selected radiobatton change the name of the units (units themselves vary in the query (!)).
Example:
$scope.savecity=function(){
localStorage["var"]=$scope.username;
localStorage["SystemOfNumbers"]=$scope.SystemOfNumbers;
<label>
<input type="radio" ng-model="SystemOfNumbers" value="metric">
Metric
</label>
<label>
<input type="radio" ng-model="SystemOfNumbers" value="imperial">
Imperial
</label><br/>
<button ng-click='savecity()'>Submit</button>
$scope.savecity=function(){
localStorage["var"]=$scope.username;
localStorage["SystemOfNumbers"]=$scope.SystemOfNumbers;
if (localStorage[SystemOfNumbers]="metrical"){
localStorage["icon"]="°C"
}
else {
localStorage["icon"]="°F"
}
}
And popup.html:
{{vm.data.list[0].temp.day}}{{localStorage["icon"]}}
That is, the selector is activated, changing the way of translation, but does not change the display unit.
Source: http://zalil.su/9855055
Answer:
You can enter city name on options page (but onle English)
(function(angular) {
'use strict';
angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
$scope.username = '';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
$scope.savecity=function(){
localStorage["var"]=$scope.username;
localStorage["SystemOfNumbers"]=$scope.SystemOfNumbers;
};
}]);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
-<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular JS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="angular.min.js"></script>
<script src="weather 2.js"></script>
</head>
<body ng-app="scopeExample">
<div ng-controller="MyController">
Enter city name:
<input type="text" ng-model="username">
<label>
<input type="radio" ng-model="SystemOfNumbers" value="metric">
Metric
</label>
<label>
<input type="radio" ng-model="SystemOfNumbers" value="imperial">
Imperial
</label><br/>
<button ng-click='savecity()'>greet</button>
Назад
</div>
</body>
</html>
I just want to simply trigger a change whenever I click a button. The change will just alert a text. However the trigger does not work please help.
Here is the code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body ng-controller="myCtrl">
<input type="text" ng-model="first.name"> <br />
<input type="checkbox" ng-model="same" id="sames" ng-change="sameAsAbove(first, second)"> Same as above <br />
<select ng-model="change" id="changes" ng-change="changeOver()">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="text" ng-model="second.name">
<input type="text" ng-model="second.school">
<span ng-click="clickMe()">Click Me!</span>
<!-- <span id="clickMe">Click Me!</span> -->
{{ same }}
<script type="text/javascript">
app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.sameAsAbove = function(primary, receiver){
receiver['name'] = primary['name'];
};
$scope.clickMe = function(){
angular.element(document.getElementById('changes')).triggerHandler('change');
// x = angular.element(document.getElementById('changes')).val();
// alert(x);
}
$scope.changeOver = function(){
alert("deam");
}
});
$("#clickMe").click(function(){
// alert("czxvzx");
// $("#same").trigger("click");
$("#changes").change();
});
</script>
</body>
</html>
Here is the link to plunker:
http://plnkr.co/edit/zErS4DaTgR79SBLbtGOy?p=preview
Try this
<script type="text/javascript">
app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$timeout){
$scope.sameAsAbove = function(primary, receiver){
receiver['name'] = primary['name'];
};
$scope.clickMe = function(){
$timeout(function() {
angular.element(document.getElementById('changes')).triggerHandler('change');
}, 100);
// x = angular.element(document.getElementById('changes')).val();
// alert(x);
}
$scope.changeOver = function(){
alert("deam");
}
});
$("#clickMe").click(function(){
// alert("czxvzx");
// $("#same").trigger("click");
$("#changes").change();
});
</script>
By adding $timeout your problem get resolved.
You can do it this way:-
$scope.clickMe = function(){
var scope = angular.element("#changes").scope();
scope.changeOver();
//angular.element(document.getElementById('changes')).triggerHandler('change');
}
Working copy here
I'm trying to post a form with inputs to my PHP backend by using Angular JS. The PHP backend is fine I tested it with POSTMAN.
I get the following error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=valForm&p1=Error%3…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)
Here is my HTML code
<!DOCTYPE html>
<html ng-app="valForm">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="customersStyle.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-controller="valController">
<form>
<input name="name" ng-model="name" type="text" id="name" placeholder='Name' >
<input name="surname" ng-model="surname" type="text" id="surname" placeholder='Surname'>
<br>
<input type="submit" ng-click="submit()" value="SUBMIT"></input>
</form>
</div>
</body>
</html>
Here is my Angular JS code the I changed the link to valid_link on purpose:
(function(){
angular.module('valForm', [])
.controller('valController',function($scope, $http){
$scope.submit = function(){
$http({
method:'POST',url:"valid_link",
params: {
name:$scope.name,
surname:$scope.surname
}
})
.success(function(response){
$scope.result = response;
console.log(result);
})
.error(function(){
console.log("error");
});
};
});
})();
The problem is that the custom javascript code was never referenced in the page.
Should add this in the bottom of the body:
<script src="mycode.js"></script>
you must specify ng-model for every input field in your form. Just change it like this:
<div ng-controller="valController">
<form ng-submit="submit()">
<input name="name" type="text" ng-model="data.name" placeholder='Name' />
<input name="surname" type="text" ng-model="data.surname" placeholder='Surname' />
<br>
<input type="submit" value="SUBMIT" />
</form>
</div>
and JS CODE :
angular.module('valForm', [])
.controller('valController',function($scope, $http){
$scope.data = {};
var param = function(data) {
var returnString = '';
for (d in data){
if (data.hasOwnProperty(d))
returnString += d + '=' + data[d] + '&';
}
return returnString.slice( 0, returnString.length - 1 );
};
$scope.submit = function(){
$http({
method:'POST',
url:"valid_link",
data : param($scope.data)
})
.success(function(response){
$scope.result = response;
console.log(result);
})
.error(function(){
console.log("error");
});
};
});
This might help you :)
Q] I'm basic Developer , How to display text from textarea on submit button using angular-js ?
I have current code with me :-
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
myApp = angular.module('myApp', []);
function Ctrl($scope) {
$scope.list = [];
$scope.pass = $scope.list;
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
if ($scope.text) {
$scope.pass.push($scope.text);
}
};
}
</script>
</head>
<body>
<div ng-app>
<div ng-controller="Ctrl">
<form ng-submit="submit()">
<br>
<textarea style="resize:initial;" type="" ng-model="text" name="text"></textarea>
<br>
<input align="right" style="margin-top:20px;margin-left:120px; align:right;" type="submit" id="submit" value="Submit" />
<pre>{{list}}</pre>
</form>
</div>
</div>
</body>
</html>
The above code just display's messages from textarea in an array format.
But i just want a single text message to be printed/displayed . How can that be achieved ? Thank you .
I guess you only want to display the current message which is in textarea. If so do this:
function Ctrl($scope) {
$scope.pass = [];
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
if ($scope.text) {
$scope.pass.push($scope.text);
$scope.list = $scope.text;
}
};
}
You can user text as value of the textarea.
When from is submitted set the value of textarea.
I guess you want the message in textarea to show in list after form submit.
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
myApp = angular.module('myApp', []);
function Ctrl($scope) {
$scope.list = '';
// ^^^^^^^^^^^^^
$scope.pass = $scope.list;
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
$scope.list = $scope.text;
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
};
}
</script>
</head>
<body>
<div>
<div ng-controller="Ctrl">
<form ng-submit="submit()">
<br>
<textarea style="resize:initial;" type="" ng-model="text" name="text"></textarea>
<br>
<input align="right" style="margin-top:20px;margin-left:120px; align:right;" type="submit" id="submit" value="Submit" />
<pre>{{list}}</pre>
</form>
</div>
</div>
</body>
</html>