WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Forms


Forms in AngularJS gives information authoritative and approval of information controls.


Input Controls

Input controls are the HTML input elements:

  • input elements
  • select elements
  • button elements
  • textarea elements

Data-Binding

Input controls gives information authoritative by utilizing the ng-model directive.

<input type="text" ng-model="firstname">

The application does now have a property named firstname.

The ng-model mandate ties the info controller to whatever is left of your application.

The property firstname, can be alluded to in a controller:

Example

<script>
var application = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "John";
});
</script>
Try it Yourself »

It can likewise be alluded to somewhere else in the application:

Example

<form>
First Name: <input type="text" ng-model="firstname">
</form>

<h1>You entered: {{firstname}}</h1>
Try it Yourself »

Checkbox

A checkbox has the esteem true or false. Apply the ng-model mandate to a checkbox, and utilize it's an incentive in your application.

Example

Show the header if the checkbox is checked:

 <form>
    Check to demonstrate a header:
    <input type="checkbox" ng-model="myVar">
</form>

<h1 ng-show="myVar">My Header</h1>
Try it Yourself »

Radiobuttons

Bind radio catches to your application with the ng-model directive.

Radio catches with the equivalent ng-model can have distinctive qualities, however, just the chose one will be used.

Example

Display some content, in light of the estimation of the chose radio button:

 <form>
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
Try it Yourself »

The estimation of myVar will be either dogs, tuts, or cars.


Selectbox

Bind select boxes to your application with the ng-model directive.

The property characterized in the ng-model trait will have the estimation of the chose alternative in the selectbox.

 Example

Display some content, in view of the estimation of the chose option:

<form>
Select a topic:
<select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
</select>
</form>
Try it Yourself »

The estimation of myVar will be either dogs, tuts, or cars.


An AngularJS Form Example

First Name:

Last Name:


form = {{user}}

master = {{master}}


Application Code

<div ng-app="myApp" ng-controller="formCtrl">
  <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>
  <p>master = {{{master}}</p>
</div>

<script>
var application = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = work() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>
Try it Yourself »

Example Explained

The ng-app order characterizes the AngularJS application.

The ng-controller order characterizes the application controller.

The ng-model order ties two info components to the user object in the model.

The formCtrl controller sets introductory qualities to the master object, and characterizes the reset() method.

The reset() strategy sets the user object equivalent to the master object.

The ng-click order summons the reset() technique, just if the catch is clicked.

The novalidate trait isn't required for this application, yet ordinarily you will utilize it in AngularJS frames, to supersede standard HTML5 validation.



Welookups is optimized for learning.Copy right 2018 - 2019 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.

welookups.com