SINGLE PAGE APPLICATION 6

ENG. ISMAIL ENJRENY

Forms

• AngularJS has some features for binding data of HTML form input fields to the model object ($scope). These features makes it easier to work with forms.

First name:

<input type="text" id="txtFirstName" ng-model="user.firstName" />

Second name:

<input type="text" id="txtSecondName" ng-model="user.secondName" />

Forms

spa6.controller(‘changeFormFieldsController', ['$scope', function ($scope) {

$scope.user = {};

// first name

$scope.user.firstName = 'ismaeel';

// second name

$scope.user.secondName = 'enjreny';

}]);

Forms - Checkbox

• If you bind a checkbox (<input type="checkbox">) to a model property, the model property will be set to true if the checkbox is checked, and false if not.

• If you need other values instead of true and false inserted into your model, you can use the ng-true-value and ng-false-value directives, like this:

<input type="checkbox" ng-model="user.Married" ng-true-value="'yes'" ng-false-value="'no'" />

Forms - Radio button

• If you have a group of radio buttons, just bind them all to the same model property. The radio button that is chosen will have its value copied into the model property.

<input type="radio" ng-model="user.Color" value="black" />

<input type="radio" ng-model="user.Color" value="red" />

Forms - DropDownList

<select ng-model="user.Level">

<option value="level 1">level 1</option>

<option value="level 2">level 2</option>

<option value="level 3">level 3</option>

</select>

Forms - DropDownList

<select ng-model="user.Level">

<option value="level 1">level 1</option>

<option value="level 2">level 2</option>

<option value="level 3">level 3</option>

</select>

Form Validation

• ng-minlength + ng-maxlength: The ng-minlength and ng-maxlength form validation directives can be used to validate the length of data entered in a form field

<input ng-maxlength="10" ng-minlength="5" type="text" id=“txtFullName" ng-model=“FullName" />

Form Validation (cont.)

• ng-pattern: The ng-pattern directive can be used to validate the value of an input field against a regular expression

<input ng-pattern="/^\d{1,2}$/" type="text" id="txtAge" ng-model=“Age" />

Form Validation (cont.)

• ng-required: The ng-required directive checks if the value of the form field is empty or not

<input ng-required=“true" type="text" id="txtAge" ng-model=“Age" />

Form - Submit

• You can submit a form in two ways:

• Using a button element with an ng-click attribute.

• Using an ng-submit attribute (directive) on the form element.

spa6.controller('formcontroller', ['$scope', function ($scope) {

$scope.testform = {};

$scope.testform.submitform = function (item, event) {

alert($scope.age2);

}}]);

<button ng-click="testform.submitform()">send</button>

NEXT?

Caching