single page application 06
TRANSCRIPT
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>