ಬ್ಲಾಗ್

12 ಅಕ್ಟೋಬರ್ 2018

AngularJS Forms

/
ಪೋಸ್ಟ್ ಮಾಡಿದವರು

When user want to interact with the application forms play an important role for user communication. User interface must be user friendly in a web application. In AngularJS forms are basically used to make an elegant user interface including with data validation and data binding.

Initially we should start with some HTML input controls like input, select elements and buttons.

eg: – Let us take an example with radio button where we select a single item at a time.

ಉದಾಹರಣೆಗೆ:

<body ng-app=””>

<form>

Pick a color:

<input type=”radio” ng-model=”colorInfo” value=”red”>Red

<input type=”radio” ng-model=”colorInfo” value=”green”>Green

<input type=”radio” ng-model=”colorInfo” value=”blue”>Blue

</ form>

<div ng-switch=” colorInfo “>

<div ng-switch-when=”red”>

<h1>Red</h1>

<p>Welcome to a world of Red.</p>

</ Div>

<div ng-switch-when=”green”>

<h1>Green</h1>

<p>Welcome to world of green.</p>

</ Div>

<div ng-switch-when=”blue”>

<h1>Blue</h1>

<p>Welcome to world of blue.</p>

</ Div>

</ Div>

Output: – Pick a color: Red Green Blue

ಕೆಂಪು

Welcome to a world of Red.

In this example we have to use ng-switch directive which will select one choice at a time. In the above example Red will be chosen by the user.

Let us take another example. In this example ng-show attribute become true when checkbox is selected.

ಉದಾಹರಣೆಗೆ:

<div ng-app=””>

<form>

Check to show a part of header:

<input type=”checkbox” ng-model=”checkBoxSelection”>

</ form>

<h1 ng-show=” checkBoxSelection XCHARX>this is the header part</h1>

</ Div>

Output: – Check to show a part of header:

this is the header part

In the above example when users select the particular checkbox, header part will show.

Let us take some brief about used directive.

  • ng-app directive is basically used to define the AngularJS application.
  • ng-controller directive is basically used to define the application controller.
  • ng-model directive is basically used to binds two input elements to the ಬಳಕೆದಾರ object in the model.
  • formCtrl controller is basically used to provide initial values to the ಮಾಸ್ಟರ್ object, and defines the reset() ವಿಧಾನ.
  • reset() method is basically used to sets the ಬಳಕೆದಾರ object equal to the ಮಾಸ್ಟರ್ ವಸ್ತು.
  • ng-click directive is basically used to invokes the reset () method, only if the button is clicked.

Angular JS Training

In Just 4 Days
ಈಗ ದಾಖಲಿಸಿ

GTranslate Your license is inactive or expired, please subscribe again!