Apply Angular validation class to non-FormControl parent
I have a reactive form, where each control follows this basic structure:
<div class="form-group">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control" placeholder="Type"/>
</div>
Angular automatically adds validation classes to each FormControl and FormGroup, such as ng-valid, ng-touched, ng-dirty, etc.
For styling purposes, I would also like to apply these same classes to the control's parent div element. For example:
<div class="form-group ng-dirty ng-touched ng-invalid">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control ng-dirty ng-touched ng-invalid" placeholder="Type"/>
</div>
I have not found a native way to do this with Angular. I attempted to create a directive that would sync the parent div's classes with the control's validation classes, but I am unable to handle the touched event in order to set the ng-touched/ng-untouched classes on the parent element.
Any help would be greatly appreciated!
angular angular2-forms
asked May 22 '17 at 21:23
Adam AAdam A
3711718
add a comment |
I have a reactive form, where each control follows this basic structure:
<div class="form-group">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control" placeholder="Type"/>
</div>
Angular automatically adds validation classes to each FormControl and FormGroup, such as ng-valid, ng-touched, ng-dirty, etc.
For styling purposes, I would also like to apply these same classes to the control's parent div element. For example:
<div class="form-group ng-dirty ng-touched ng-invalid">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control ng-dirty ng-touched ng-invalid" placeholder="Type"/>
</div>
I have not found a native way to do this with Angular. I attempted to create a directive that would sync the parent div's classes with the control's validation classes, but I am unable to handle the touched event in order to set the ng-touched/ng-untouched classes on the parent element.
Any help would be greatly appreciated!
angular angular2-forms
asked May 22 '17 at 21:23
Adam AAdam A
3711718
touchedflag is set as a response for a simpleblurevent. You can reproduce it this way.
– mat3e
May 23 '17 at 16:58
add a comment |
I have a reactive form, where each control follows this basic structure:
<div class="form-group">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control" placeholder="Type"/>
</div>
Angular automatically adds validation classes to each FormControl and FormGroup, such as ng-valid, ng-touched, ng-dirty, etc.
For styling purposes, I would also like to apply these same classes to the control's parent div element. For example:
<div class="form-group ng-dirty ng-touched ng-invalid">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control ng-dirty ng-touched ng-invalid" placeholder="Type"/>
</div>
I have not found a native way to do this with Angular. I attempted to create a directive that would sync the parent div's classes with the control's validation classes, but I am unable to handle the touched event in order to set the ng-touched/ng-untouched classes on the parent element.
Any help would be greatly appreciated!
angular angular2-forms
asked May 22 '17 at 21:23
Adam AAdam A
3711718
I have a reactive form, where each control follows this basic structure:
<div class="form-group">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control" placeholder="Type"/>
</div>
Angular automatically adds validation classes to each FormControl and FormGroup, such as ng-valid, ng-touched, ng-dirty, etc.
For styling purposes, I would also like to apply these same classes to the control's parent div element. For example:
<div class="form-group ng-dirty ng-touched ng-invalid">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control ng-dirty ng-touched ng-invalid" placeholder="Type"/>
</div>
I have not found a native way to do this with Angular. I attempted to create a directive that would sync the parent div's classes with the control's validation classes, but I am unable to handle the touched event in order to set the ng-touched/ng-untouched classes on the parent element.
Any help would be greatly appreciated!
angular angular2-forms
angular angular2-forms
asked May 22 '17 at 21:23
Adam AAdam A
3711718
asked May 22 '17 at 21:23
Adam AAdam A
3711718
asked May 22 '17 at 21:23
Adam AAdam A
3711718
asked May 22 '17 at 21:23
Adam AAdam A
3711718
asked May 22 '17 at 21:23
Adam AAdam A
3711718
3711718
touchedflag is set as a response for a simpleblurevent. You can reproduce it this way.
– mat3e
May 23 '17 at 16:58
add a comment |
touchedflag is set as a response for a simpleblurevent. You can reproduce it this way.
– mat3e
May 23 '17 at 16:58
touched flag is set as a response for a simple blur event. You can reproduce it this way.– mat3e
May 23 '17 at 16:58
touched flag is set as a response for a simple blur event. You can reproduce it this way.– mat3e
May 23 '17 at 16:58
add a comment |
1 Answer
1
active
oldest
votes
<div class="form-group ng-dirty ng-touched ng-invalid" [class.ng-invalid]="myForm.vtype.invalid">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control ng-dirty ng-touched ng-invalid" placeholder="Type"/>
</div>
This help you to apply dynamic classes.
answered Nov 23 '18 at 13:16
TejalTejal
914
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%2f44122359%2fapply-angular-validation-class-to-non-formcontrol-parent%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
<div class="form-group ng-dirty ng-touched ng-invalid" [class.ng-invalid]="myForm.vtype.invalid">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control ng-dirty ng-touched ng-invalid" placeholder="Type"/>
</div>
This help you to apply dynamic classes.
answered Nov 23 '18 at 13:16
TejalTejal
914
add a comment |
<div class="form-group ng-dirty ng-touched ng-invalid" [class.ng-invalid]="myForm.vtype.invalid">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control ng-dirty ng-touched ng-invalid" placeholder="Type"/>
</div>
This help you to apply dynamic classes.
answered Nov 23 '18 at 13:16
TejalTejal
914
add a comment |
<div class="form-group ng-dirty ng-touched ng-invalid" [class.ng-invalid]="myForm.vtype.invalid">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control ng-dirty ng-touched ng-invalid" placeholder="Type"/>
</div>
This help you to apply dynamic classes.
answered Nov 23 '18 at 13:16
TejalTejal
914
<div class="form-group ng-dirty ng-touched ng-invalid" [class.ng-invalid]="myForm.vtype.invalid">
<label for="vtype">Vehicle Type</label>
<input formControlName="vtype" class="form-control ng-dirty ng-touched ng-invalid" placeholder="Type"/>
</div>
This help you to apply dynamic classes.
answered Nov 23 '18 at 13:16
TejalTejal
914
answered Nov 23 '18 at 13:16
TejalTejal
914
answered Nov 23 '18 at 13:16
TejalTejal
914
answered Nov 23 '18 at 13:16
TejalTejal
914
914
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%2f44122359%2fapply-angular-validation-class-to-non-formcontrol-parent%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
touchedflag is set as a response for a simpleblurevent. You can reproduce it this way.– mat3e
May 23 '17 at 16:58