how to validate across two different models in angular js
Could anyone please tell me how to validate across two different models in angularjs
Here is my code:
http://plnkr.co/edit/Utsg7Zr8fsg7zzX5Naib?p=preview I am adding custom validation using custom directive
Requirement
It should display error when user enter “First” name it check “last name” length if it less then 4 .it should show error.Same in last name if user enter “last name” then check “first name” length is less than 4 .if yes it should show error
I do the following steps:
- Type "a" in first field (it become red which is fine).
but when Itype "abcderff" in last name why is the first name is red
??.directive("testfirst", function()
return
restrict: "A",
require: 'ngModel',
link: function(scope, element, attributes, modelVal)
modelVal.$validators.testfirst= function(val)
console.log(attributes.last)
console.log((attributes.last && attributes.last.length < 4));
if(val.length > 0 && !(attributes.last && attributes.last.length < 4))
return false
return true
;
scope.$watch("val", function()
modelVal.$validate();
);
;
).directive("testlast", function()
return
restrict: "A",
require: 'ngModel',
link: function(scope, element, attributes, modelVal)
modelVal.$validators.testlast= function(val)
if(val.length > 0 && !(attributes.first && attributes.first.length < 4))
return false
return true
;
scope.$watch("val", function()
modelVal.$validate();
);
;
);
javascript angularjs angularjs-directive
edited Nov 13 '18 at 9:05
Pankaj Parkar
113k15162236
asked Nov 13 '18 at 8:33
user944513user944513
3,2271260119
add a comment |
Could anyone please tell me how to validate across two different models in angularjs
Here is my code:
http://plnkr.co/edit/Utsg7Zr8fsg7zzX5Naib?p=preview I am adding custom validation using custom directive
Requirement
It should display error when user enter “First” name it check “last name” length if it less then 4 .it should show error.Same in last name if user enter “last name” then check “first name” length is less than 4 .if yes it should show error
I do the following steps:
- Type "a" in first field (it become red which is fine).
but when Itype "abcderff" in last name why is the first name is red
??.directive("testfirst", function()
return
restrict: "A",
require: 'ngModel',
link: function(scope, element, attributes, modelVal)
modelVal.$validators.testfirst= function(val)
console.log(attributes.last)
console.log((attributes.last && attributes.last.length < 4));
if(val.length > 0 && !(attributes.last && attributes.last.length < 4))
return false
return true
;
scope.$watch("val", function()
modelVal.$validate();
);
;
).directive("testlast", function()
return
restrict: "A",
require: 'ngModel',
link: function(scope, element, attributes, modelVal)
modelVal.$validators.testlast= function(val)
if(val.length > 0 && !(attributes.first && attributes.first.length < 4))
return false
return true
;
scope.$watch("val", function()
modelVal.$validate();
);
;
);
javascript angularjs angularjs-directive
edited Nov 13 '18 at 9:05
Pankaj Parkar
113k15162236
asked Nov 13 '18 at 8:33
user944513user944513
3,2271260119
add a comment |
Could anyone please tell me how to validate across two different models in angularjs
Here is my code:
http://plnkr.co/edit/Utsg7Zr8fsg7zzX5Naib?p=preview I am adding custom validation using custom directive
Requirement
It should display error when user enter “First” name it check “last name” length if it less then 4 .it should show error.Same in last name if user enter “last name” then check “first name” length is less than 4 .if yes it should show error
I do the following steps:
- Type "a" in first field (it become red which is fine).
but when Itype "abcderff" in last name why is the first name is red
??.directive("testfirst", function()
return
restrict: "A",
require: 'ngModel',
link: function(scope, element, attributes, modelVal)
modelVal.$validators.testfirst= function(val)
console.log(attributes.last)
console.log((attributes.last && attributes.last.length < 4));
if(val.length > 0 && !(attributes.last && attributes.last.length < 4))
return false
return true
;
scope.$watch("val", function()
modelVal.$validate();
);
;
).directive("testlast", function()
return
restrict: "A",
require: 'ngModel',
link: function(scope, element, attributes, modelVal)
modelVal.$validators.testlast= function(val)
if(val.length > 0 && !(attributes.first && attributes.first.length < 4))
return false
return true
;
scope.$watch("val", function()
modelVal.$validate();
);
;
);
javascript angularjs angularjs-directive
edited Nov 13 '18 at 9:05
Pankaj Parkar
113k15162236
asked Nov 13 '18 at 8:33
user944513user944513
3,2271260119
Could anyone please tell me how to validate across two different models in angularjs
Here is my code:
http://plnkr.co/edit/Utsg7Zr8fsg7zzX5Naib?p=preview I am adding custom validation using custom directive
Requirement
It should display error when user enter “First” name it check “last name” length if it less then 4 .it should show error.Same in last name if user enter “last name” then check “first name” length is less than 4 .if yes it should show error
I do the following steps:
- Type "a" in first field (it become red which is fine).
but when Itype "abcderff" in last name why is the first name is red
??.directive("testfirst", function()
return
restrict: "A",
require: 'ngModel',
link: function(scope, element, attributes, modelVal)
modelVal.$validators.testfirst= function(val)
console.log(attributes.last)
console.log((attributes.last && attributes.last.length < 4));
if(val.length > 0 && !(attributes.last && attributes.last.length < 4))
return false
return true
;
scope.$watch("val", function()
modelVal.$validate();
);
;
).directive("testlast", function()
return
restrict: "A",
require: 'ngModel',
link: function(scope, element, attributes, modelVal)
modelVal.$validators.testlast= function(val)
if(val.length > 0 && !(attributes.first && attributes.first.length < 4))
return false
return true
;
scope.$watch("val", function()
modelVal.$validate();
);
;
);
javascript angularjs angularjs-directive
javascript angularjs angularjs-directive
edited Nov 13 '18 at 9:05
Pankaj Parkar
113k15162236
asked Nov 13 '18 at 8:33
user944513user944513
3,2271260119
edited Nov 13 '18 at 9:05
Pankaj Parkar
113k15162236
asked Nov 13 '18 at 8:33
user944513user944513
3,2271260119
edited Nov 13 '18 at 9:05
Pankaj Parkar
113k15162236
edited Nov 13 '18 at 9:05
Pankaj Parkar
113k15162236
edited Nov 13 '18 at 9:05
Pankaj Parkar
113k15162236
113k15162236
asked Nov 13 '18 at 8:33
user944513user944513
3,2271260119
asked Nov 13 '18 at 8:33
user944513user944513
3,2271260119
asked Nov 13 '18 at 8:33
user944513user944513
3,2271260119
3,2271260119
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You can refer I change this content:
index.html
<body ng-controller="MainCtrl">
<button ng-click="submit()">Submit</button>
<form name="myform">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th width="50%">Field Name</th>
<th class="smallcol" width="50%">Field Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in c">
<td ng-if="value.type == 'LABEL'" colspan="2" style="background: #777; color: white;">key</td>
<td ng-if="value.type == 'FIELD'">key</td>
<td ng-if="value.type == 'FIELD' && isEditableMode && value.editable && value.dataType=='last'">
<div class="form-group" ng-class="'has-error': myform[key].$invalid">
<input type="text" name="key" first="getCheck('First')" class="form-control" ng-model="value.value" ng-keyup="update(value)" testlast>
</div>
</td>
<td ng-if="value.type == 'FIELD' && isEditableMode && value.editable && value.dataType=='name'">
<div class="form-group" ng-class="'has-error': myform[key].$invalid">
<input type="text" last="getCheck('Last')" name="key" class="form-control" ng-model="value.value" ng-keyup="update(value)" testfirst>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</body>
Noted :
Test case 1 : It should display error when user enter “First” name it check “last name” length if it less then 4 .it should show error
Test case 2 : Same in last name if user enter “last name” then check “first name” length is less than 4 .if yes it should show error
Test case 1 finish after that you must to clear value all field.
after You will test case 2 because css show error wrong. you should handle it again.
sample code
answered Nov 15 '18 at 10:36
thanhdung0312thanhdung0312
1867
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53276829%2fhow-to-validate-across-two-different-models-in-angular-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can refer I change this content:
index.html
<body ng-controller="MainCtrl">
<button ng-click="submit()">Submit</button>
<form name="myform">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th width="50%">Field Name</th>
<th class="smallcol" width="50%">Field Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in c">
<td ng-if="value.type == 'LABEL'" colspan="2" style="background: #777; color: white;">key</td>
<td ng-if="value.type == 'FIELD'">key</td>
<td ng-if="value.type == 'FIELD' && isEditableMode && value.editable && value.dataType=='last'">
<div class="form-group" ng-class="'has-error': myform[key].$invalid">
<input type="text" name="key" first="getCheck('First')" class="form-control" ng-model="value.value" ng-keyup="update(value)" testlast>
</div>
</td>
<td ng-if="value.type == 'FIELD' && isEditableMode && value.editable && value.dataType=='name'">
<div class="form-group" ng-class="'has-error': myform[key].$invalid">
<input type="text" last="getCheck('Last')" name="key" class="form-control" ng-model="value.value" ng-keyup="update(value)" testfirst>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</body>
Noted :
Test case 1 : It should display error when user enter “First” name it check “last name” length if it less then 4 .it should show error
Test case 2 : Same in last name if user enter “last name” then check “first name” length is less than 4 .if yes it should show error
Test case 1 finish after that you must to clear value all field.
after You will test case 2 because css show error wrong. you should handle it again.
sample code
answered Nov 15 '18 at 10:36
thanhdung0312thanhdung0312
1867
add a comment |
You can refer I change this content:
index.html
<body ng-controller="MainCtrl">
<button ng-click="submit()">Submit</button>
<form name="myform">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th width="50%">Field Name</th>
<th class="smallcol" width="50%">Field Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in c">
<td ng-if="value.type == 'LABEL'" colspan="2" style="background: #777; color: white;">key</td>
<td ng-if="value.type == 'FIELD'">key</td>
<td ng-if="value.type == 'FIELD' && isEditableMode && value.editable && value.dataType=='last'">
<div class="form-group" ng-class="'has-error': myform[key].$invalid">
<input type="text" name="key" first="getCheck('First')" class="form-control" ng-model="value.value" ng-keyup="update(value)" testlast>
</div>
</td>
<td ng-if="value.type == 'FIELD' && isEditableMode && value.editable && value.dataType=='name'">
<div class="form-group" ng-class="'has-error': myform[key].$invalid">
<input type="text" last="getCheck('Last')" name="key" class="form-control" ng-model="value.value" ng-keyup="update(value)" testfirst>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</body>
Noted :
Test case 1 : It should display error when user enter “First” name it check “last name” length if it less then 4 .it should show error
Test case 2 : Same in last name if user enter “last name” then check “first name” length is less than 4 .if yes it should show error
Test case 1 finish after that you must to clear value all field.
after You will test case 2 because css show error wrong. you should handle it again.
sample code
answered Nov 15 '18 at 10:36
thanhdung0312thanhdung0312
1867
add a comment |
You can refer I change this content:
index.html
<body ng-controller="MainCtrl">
<button ng-click="submit()">Submit</button>
<form name="myform">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th width="50%">Field Name</th>
<th class="smallcol" width="50%">Field Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in c">
<td ng-if="value.type == 'LABEL'" colspan="2" style="background: #777; color: white;">key</td>
<td ng-if="value.type == 'FIELD'">key</td>
<td ng-if="value.type == 'FIELD' && isEditableMode && value.editable && value.dataType=='last'">
<div class="form-group" ng-class="'has-error': myform[key].$invalid">
<input type="text" name="key" first="getCheck('First')" class="form-control" ng-model="value.value" ng-keyup="update(value)" testlast>
</div>
</td>
<td ng-if="value.type == 'FIELD' && isEditableMode && value.editable && value.dataType=='name'">
<div class="form-group" ng-class="'has-error': myform[key].$invalid">
<input type="text" last="getCheck('Last')" name="key" class="form-control" ng-model="value.value" ng-keyup="update(value)" testfirst>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</body>
Noted :
Test case 1 : It should display error when user enter “First” name it check “last name” length if it less then 4 .it should show error
Test case 2 : Same in last name if user enter “last name” then check “first name” length is less than 4 .if yes it should show error
Test case 1 finish after that you must to clear value all field.
after You will test case 2 because css show error wrong. you should handle it again.
sample code
answered Nov 15 '18 at 10:36
thanhdung0312thanhdung0312
1867
You can refer I change this content:
index.html
<body ng-controller="MainCtrl">
<button ng-click="submit()">Submit</button>
<form name="myform">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th width="50%">Field Name</th>
<th class="smallcol" width="50%">Field Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in c">
<td ng-if="value.type == 'LABEL'" colspan="2" style="background: #777; color: white;">key</td>
<td ng-if="value.type == 'FIELD'">key</td>
<td ng-if="value.type == 'FIELD' && isEditableMode && value.editable && value.dataType=='last'">
<div class="form-group" ng-class="'has-error': myform[key].$invalid">
<input type="text" name="key" first="getCheck('First')" class="form-control" ng-model="value.value" ng-keyup="update(value)" testlast>
</div>
</td>
<td ng-if="value.type == 'FIELD' && isEditableMode && value.editable && value.dataType=='name'">
<div class="form-group" ng-class="'has-error': myform[key].$invalid">
<input type="text" last="getCheck('Last')" name="key" class="form-control" ng-model="value.value" ng-keyup="update(value)" testfirst>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</body>
Noted :
Test case 1 : It should display error when user enter “First” name it check “last name” length if it less then 4 .it should show error
Test case 2 : Same in last name if user enter “last name” then check “first name” length is less than 4 .if yes it should show error
Test case 1 finish after that you must to clear value all field.
after You will test case 2 because css show error wrong. you should handle it again.
sample code
answered Nov 15 '18 at 10:36
thanhdung0312thanhdung0312
1867
answered Nov 15 '18 at 10:36
thanhdung0312thanhdung0312
1867
answered Nov 15 '18 at 10:36
thanhdung0312thanhdung0312
1867
answered Nov 15 '18 at 10:36
thanhdung0312thanhdung0312
1867
1867
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53276829%2fhow-to-validate-across-two-different-models-in-angular-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
