How to use AngularJS with HTML forms elements

1. SINGLE PAGE APPLICATION 6
ENG. ISMAIL ENJRENY

2. 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" />

3. Forms
spa6.controller(‘changeFormFieldsController', ['$scope', function ($scope) {
$scope.user = {};
// first name
$scope.user.firstName = 'ismaeel';
// second name
$scope.user.secondName = 'enjreny';
}]);

4. 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'" />

5. 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" />

6. 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>

7. 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>

8. 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" />

9. 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"
/>

10. 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" />

11. 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>

12. NEXT?