Scribd Logo
Upload

Welcome to Scribd!

  • Angular Js - Lab - 7

    Uploaded by

    yicet13049
    8 views4 pages
    This document describes an AngularJS form validation example. It includes a form with fields for name, address, contact number, email, and terms agreement. Each field is validated for requirements and data type where appropriate. A controller defines functions for submitting the form and checking field validity classes. Css styles valid and invalid fields.

    Original Description:

    Original Title

    Angular js_lab_7

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document describes an AngularJS form validation example. It includes a form with fields for name, address, contact number, email, and terms agreement. Each field is validated for requirements and data type where appropriate. A controller defines functions for submitting the form and checking field validity classes. Css styles valid and invalid fields.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    8 views4 pages

    Angular Js - Lab - 7

    Uploaded by

    yicet13049
    This document describes an AngularJS form validation example. It includes a form with fields for name, address, contact number, email, and terms agreement. Each field is validated for requirements and data type where appropriate. A controller defines functions for submitting the form and checking field validity classes. Css styles valid and invalid fields.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 4

    <!

    DOCTYPE html>

    <html>

    <head>

    <title>

    AngularJs Form Input Fields Validation Example

    </title>

    <script src="angular.min.js"></script>

    <script>

    var app = angular.module('formApp', []);

    app.controller('formCtrl', function ($scope) {

    $scope.sendForm = function () {

    $scope.msg='Form Submited Successfully';

    };

    $scope.getClass = function (color) {


    return color.toString();

    });

    </script>

    <style>

    .valid.false {

    background: red;

    .valid.true {

    background: green;

    .error {

    color: red;

    </style>

    </head>
    <body ng-app="formApp" ng-controller="formCtrl">

    <h3>Form validation demo app in AngularJs</h3>

    <form name="personForm" ng-submit="sendForm()">

    <label for="name">Name</label>

    <input id="name" name="name" type="text" ng-model="person.name" required />

    <span class="error" ng-show="personForm.name.$error.required"> Required! </span>

    <br /><br />

    <label for="adress">Adress</label>

    <input id="address" name="address" type="text" ng-model="person.address" required />

    <span class="error" ng-show="personForm.address.$error.required"> Required! </span>

    <br /><br/>

    <label for="contact">Contact No</label>

    <input id="mobile" name="mobile" type="contact" ng-model="person.mobile" required />

    <span class="error" ng-show="personForm.mobile.$error.required">Required number!</span>

    <span class="error" ng-show="personForm.mobile.$error.mobile">Invalid mobile!</span>

    <br /><br />


    <label for="email">Email</label>

    <input id="email" name="email" type="email" ng-model="person.email" required />

    <span class="error" ng-show="personForm.email.$error.required">Required!</span>

    <span class="error" ng-show="personForm.email.$error.email">Invalid Email!</span>

    <br /><br />

    <input type="checkbox" ng-model="terms" name="terms" id="terms" required />

    <label for="terms">I Agree to the terms.</label>

    <span class="error" ng-show="personForm.terms.$error.required">You must agree to the


    terms</span>

    <br /><br />

    <button type="submit">Submit Form</button>

    <br /><br />

    <span>{{msg}}</span>

    </form>

    </body>

    </html>

    You might also like