Click here to Skip to main content
13,863,289 members
Rate this:
 
Please Sign up or sign in to vote.
Hy guys i have found one proble in my application which is related to angularjs.
 
 I have two textbox , if i enter in first textbox the second textbox will be fill automatically.
which i done with simple  javascript.
 
In second textbox i used angularjs validation.
 
All are required fill. 
 
Once all the fields fill the form will be validate and button will get enable.
 
 
===========================================================
 
But i dnt want to enter in second textbox i will enter in first textbox only and it will fill the second textbox . since second textbox have value now so it should validate the form.
 
But this is not working! how to do that ?
 
This the complete code just copy paste you will get to know whats the problem.
Fill only first textbox.


If you have any solution please let me know....
 
Thank you  


What I have tried:

<html>
<head>
   
    <title>AngularJS Validation</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script>
        // create angular app
        var validationApp = angular.module('validationApp', []);

        // create angular controller
        validationApp.controller('mainController', function ($scope) {

            
        });

        function sync() {
            var n1 = document.getElementById('txtname1');
            var n2 = document.getElementById('txtname2');
            n2.value = n1.value;
        }
    </script>


</head>
<body>


    <div ng-app="validationApp" ng-controller="mainController">
        <div class="container">
            <div class="row">

                <div class="col-sm-6">
                    <!-- FORM ============ -->
                    <form name="userForm" ng-submit="submitForm()" novalidate>

                        <label>Enter name</label>
                        <input type="text" name="name1" id="txtname1" ng-model="user.name1" class="form-control" onkeyup="sync()" required>
                        <br />

                        <!-- NAME -->
                        <div class="form-group" ng-class="{ 'has-error' : userForm.name2.$invalid && !userForm.name2.$pristine,'has-success' : userForm.name2.$valid && !userForm.name2.$pristine }">
                            <label>Name will be copy from the first textbox</label>
                            <input type="text" name="name2" class="form-control" ng-model="user.name2" required id="txtname2">
                            <p ng-show="userForm.name2.$invalid && !userForm.name2.$pristine" class="help-block">You name is required.</p>
                        </div>

                        <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>

                    </form>
                </div>

            </div>
            <p>If we enter value in the first textbox then that value will be copy in the second textbox.<br/>That time form shuould valid and button should enable as well as in the second textbox green broder should come.(Angularjs Validation)</p>
        </div>
    </div>

</body>
</html>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web04 | 2.8.190214.1 | Last Updated 12 Feb 2019
Copyright © CodeProject, 1999-2019
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100