form validation with angularjs with bootstrap

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.

Im not getting ....

This the complete code just copy paste you will get to know whats the problem.

Fill only first textbox.

"utf-8" />
AngularJS Validation
"stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
"validationApp" ng-controller="mainController">
class="container">
class="row">
class="col-sm-6">
"userForm" ng-submit="submitForm()" novalidate>
Enter name
"text" name="name1" id="txtname1" ng-model="user.name1" class="form-control" onkeyup="sync()" required>
class="form-group" ng-class="{ 'has-error' : userForm.name2.$invalid && !userForm.name2.$pristine,'has-success' : userForm.name2.$valid && !userForm.name2.$pristine }">
Name will be copy from the first textbox
"text" name="name2" class="form-control" ng-model="user.name2" required id="txtname2">
"userForm.name2.$invalid && !userForm.name2.$pristine" class="help-block">You name is required.

"submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Faisal Pathan7y ago
Accepted answer
HI,

I solved your issue in below jsfiddel please visit

https://jsfiddle.net/faisal5170/v8r96jgL/5/

If it helps please mark as accepted answer.

Thnaks
0
Faisal Pathan7y ago
you are welcome.
0
Anilananda Chakrabortty7y ago
@Faisal Pathan

Thank you so much ....

after visit https://jsfiddle.net/faisal5170/v8r96jgL/5/

i also made small changes and now its working...

So i got two solution in your answer thank you so much ...

here i have changed......

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;
var scope = angular.element(document.getElementById("Example")).scope();
scope.$apply(function () {
scope.user.name2 = n1.value;
});
}
And added id in div
+1