.png)
Simple form using AngularJS
Form is a collection of controls for the purpose of grouping related controls together.
Form and controls provide validation services, so that the user can be notified of invalid input. This provides a better user experience, because the user gets instant feedback on how to correct the error. Keep in mind that while client-side validation plays an important role in providing good user experience, it can easily be circumvented and thus can not be trusted. Server-side validation is still necessary for a secure application.
The key directive in understanding two-way data-binding is ngModel. The ngModel directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model.
index.html
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.0.4angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form novalidate class="simple-form">
Name:<input type="text" ng-model="user.name" /><br />
E-Mail: <input type="email" ng-model="user.email" /><br />
Gender <input type="radio" ng-model="user.gender" value="male" / >Male
<input type="radion" ng-model="user.gender" value="female" />Female<br />
<button ng-click="reset()">Reset</button>
<button ng-click="update(user)">Save</button>
</form>
<pre>form = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>
</body>
</html>
script.js
function controller($scope) {
$scope.master = {}'
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
Hi,
ReplyDeleteI tried your code, when I type the name and the email, it appears :
form = {
"name": "majid",
"email": "majid@yahoo.com"
}
But the two buttons are not doing anything,
Hi, Majid,
Deleterefer this link,
I hope its helpful to you.
http://stackoverflow.com/questions/19985344/angularjs-simple-form-submit
Hi, majid,
ReplyDeletefine. am using angular.copy() concept in the simple form.
https://www.barbarianmeetscoding.com/blog/2016/03/25/getting-started-with-angular-2-step-by-step-1-your-first-component/
ReplyDeleteNice article dude , please task Code java script and reactjs.
ReplyDelete