Form Validations without *ngIf. how can i use form validations(from service) without creating a new div
1
How can I use form validations (from service) without creating a new div everytime for validation Error.Eg:
<div class="row">
<div class="form-group col-md-2 ">
<label for="validity" class="input-heading ">Validity*</label>
</div>
<div>
<p ngIf="myForm.get('validity').invalid">Please provide Validity</p>
</div>
<div class="form-group col-md-2">
<div class="row">
<label for="startMonth" class="input-heading col-md-2">StartMonth</label>
</div>
<div class="row">
<input type="text" class=" from-control">
</div>
</div>
<div class="form-group col-md-2">
<div class="row">
<label for="endMonth" class="input-heading col-md-2">EndMonth</label>
</div>
<div class="row">
<input type="text" class=" from-control">
</div>
</div>
</div>
--repeated code
<p *ngIf="myForm.get('endMonth').invalid >Please provide End Month</p>
</div>
</div>
angular
edited Nov 13 '18 at 12:34
Paul Rey
530318
asked Nov 13 '18 at 10:40
Tanvi ShanTanvi Shan
61
add a comment |
1
How can I use form validations (from service) without creating a new div everytime for validation Error.Eg:
<div class="row">
<div class="form-group col-md-2 ">
<label for="validity" class="input-heading ">Validity*</label>
</div>
<div>
<p ngIf="myForm.get('validity').invalid">Please provide Validity</p>
</div>
<div class="form-group col-md-2">
<div class="row">
<label for="startMonth" class="input-heading col-md-2">StartMonth</label>
</div>
<div class="row">
<input type="text" class=" from-control">
</div>
</div>
<div class="form-group col-md-2">
<div class="row">
<label for="endMonth" class="input-heading col-md-2">EndMonth</label>
</div>
<div class="row">
<input type="text" class=" from-control">
</div>
</div>
</div>
--repeated code
<p *ngIf="myForm.get('endMonth').invalid >Please provide End Month</p>
</div>
</div>
angular
edited Nov 13 '18 at 12:34
Paul Rey
530318
asked Nov 13 '18 at 10:40
Tanvi ShanTanvi Shan
61
add a comment |
1
1
1
How can I use form validations (from service) without creating a new div everytime for validation Error.Eg:
<div class="row">
<div class="form-group col-md-2 ">
<label for="validity" class="input-heading ">Validity*</label>
</div>
<div>
<p ngIf="myForm.get('validity').invalid">Please provide Validity</p>
</div>
<div class="form-group col-md-2">
<div class="row">
<label for="startMonth" class="input-heading col-md-2">StartMonth</label>
</div>
<div class="row">
<input type="text" class=" from-control">
</div>
</div>
<div class="form-group col-md-2">
<div class="row">
<label for="endMonth" class="input-heading col-md-2">EndMonth</label>
</div>
<div class="row">
<input type="text" class=" from-control">
</div>
</div>
</div>
--repeated code
<p *ngIf="myForm.get('endMonth').invalid >Please provide End Month</p>
</div>
</div>
angular
edited Nov 13 '18 at 12:34
Paul Rey
530318
asked Nov 13 '18 at 10:40
Tanvi ShanTanvi Shan
61
How can I use form validations (from service) without creating a new div everytime for validation Error.Eg:
<div class="row">
<div class="form-group col-md-2 ">
<label for="validity" class="input-heading ">Validity*</label>
</div>
<div>
<p ngIf="myForm.get('validity').invalid">Please provide Validity</p>
</div>
<div class="form-group col-md-2">
<div class="row">
<label for="startMonth" class="input-heading col-md-2">StartMonth</label>
</div>
<div class="row">
<input type="text" class=" from-control">
</div>
</div>
<div class="form-group col-md-2">
<div class="row">
<label for="endMonth" class="input-heading col-md-2">EndMonth</label>
</div>
<div class="row">
<input type="text" class=" from-control">
</div>
</div>
</div>
--repeated code
<p *ngIf="myForm.get('endMonth').invalid >Please provide End Month</p>
</div>
</div>
angular
angular
edited Nov 13 '18 at 12:34
Paul Rey
530318
asked Nov 13 '18 at 10:40
Tanvi ShanTanvi Shan
61
edited Nov 13 '18 at 12:34
Paul Rey
530318
asked Nov 13 '18 at 10:40
Tanvi ShanTanvi Shan
61
edited Nov 13 '18 at 12:34
Paul Rey
530318
edited Nov 13 '18 at 12:34
Paul Rey
530318
edited Nov 13 '18 at 12:34
Paul Rey
530318
530318
asked Nov 13 '18 at 10:40
Tanvi ShanTanvi Shan
61
asked Nov 13 '18 at 10:40
Tanvi ShanTanvi Shan
61
asked Nov 13 '18 at 10:40
Tanvi ShanTanvi Shan
61
61
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
You can avoid this repletion by creating a component say print-error which take the control as input.
print-error.ts
As of now there is only one @Input however if you want to customize further you can add some more @Input here.
import {Component, Input, OnInit, OnDestroy} from '@angular/core';
import {DragulaService} from 'ng2-dragula';
@Component({
selector: 'print-error',
templateUrl: './print-error.component.html',
providers:
})
export class PrintError{
@Input("control")
private control: any;
}
print-error.html
Add all kind of validation here. It will apply the error message accordingly.
<div class="text-danger" *ngIf="control && control.errors && (control.dirty || control.touched)">
<div><small *ngIf="control.errors.required">This field is required</small></div>
<div><small *ngIf="control.errors.unique">{{control.errors.unique}}</small></div>
<div><small *ngIf="control.errors.lessThanValidator">{{control.errors.lessThanValidator}}</small></div>
<div><small *ngIf="control.errors.greaterThanValidator">{{control.errors.greaterThanValidator}}</small></div>
</div>
Usage
<input required name="subject" #subject="ngModel" [(ngModel)]="subject">
<print-error [control]="subject"></print-error>
answered Nov 13 '18 at 11:07
Sunil SinghSunil Singh
6,1472626
I want to dynamically add a div below my input field where ever they are applicable for eg if i dont fill name field,i get error for name, the dynamic div should say "Please enter Name"(this msg will come from service)
– Tanvi Shan
Dec 26 '18 at 13:29
You can get the name fromcontrolinPrintError. Or you can add one more@Inputfor name.
– Sunil Singh
Dec 26 '18 at 15:17
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
});
}
});
draft saved
draft discarded
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%2f53279188%2fform-validations-without-ngif-how-can-i-use-form-validationsfrom-service-wit%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
0
You can avoid this repletion by creating a component say print-error which take the control as input.
print-error.ts
As of now there is only one @Input however if you want to customize further you can add some more @Input here.
import {Component, Input, OnInit, OnDestroy} from '@angular/core';
import {DragulaService} from 'ng2-dragula';
@Component({
selector: 'print-error',
templateUrl: './print-error.component.html',
providers:
})
export class PrintError{
@Input("control")
private control: any;
}
print-error.html
Add all kind of validation here. It will apply the error message accordingly.
<div class="text-danger" *ngIf="control && control.errors && (control.dirty || control.touched)">
<div><small *ngIf="control.errors.required">This field is required</small></div>
<div><small *ngIf="control.errors.unique">{{control.errors.unique}}</small></div>
<div><small *ngIf="control.errors.lessThanValidator">{{control.errors.lessThanValidator}}</small></div>
<div><small *ngIf="control.errors.greaterThanValidator">{{control.errors.greaterThanValidator}}</small></div>
</div>
Usage
<input required name="subject" #subject="ngModel" [(ngModel)]="subject">
<print-error [control]="subject"></print-error>
answered Nov 13 '18 at 11:07
Sunil SinghSunil Singh
6,1472626
I want to dynamically add a div below my input field where ever they are applicable for eg if i dont fill name field,i get error for name, the dynamic div should say "Please enter Name"(this msg will come from service)
– Tanvi Shan
Dec 26 '18 at 13:29
You can get the name fromcontrolinPrintError. Or you can add one more@Inputfor name.
– Sunil Singh
Dec 26 '18 at 15:17
add a comment |
0
You can avoid this repletion by creating a component say print-error which take the control as input.
print-error.ts
As of now there is only one @Input however if you want to customize further you can add some more @Input here.
import {Component, Input, OnInit, OnDestroy} from '@angular/core';
import {DragulaService} from 'ng2-dragula';
@Component({
selector: 'print-error',
templateUrl: './print-error.component.html',
providers:
})
export class PrintError{
@Input("control")
private control: any;
}
print-error.html
Add all kind of validation here. It will apply the error message accordingly.
<div class="text-danger" *ngIf="control && control.errors && (control.dirty || control.touched)">
<div><small *ngIf="control.errors.required">This field is required</small></div>
<div><small *ngIf="control.errors.unique">{{control.errors.unique}}</small></div>
<div><small *ngIf="control.errors.lessThanValidator">{{control.errors.lessThanValidator}}</small></div>
<div><small *ngIf="control.errors.greaterThanValidator">{{control.errors.greaterThanValidator}}</small></div>
</div>
Usage
<input required name="subject" #subject="ngModel" [(ngModel)]="subject">
<print-error [control]="subject"></print-error>
answered Nov 13 '18 at 11:07
Sunil SinghSunil Singh
6,1472626
I want to dynamically add a div below my input field where ever they are applicable for eg if i dont fill name field,i get error for name, the dynamic div should say "Please enter Name"(this msg will come from service)
– Tanvi Shan
Dec 26 '18 at 13:29
You can get the name fromcontrolinPrintError. Or you can add one more@Inputfor name.
– Sunil Singh
Dec 26 '18 at 15:17
add a comment |
0
0
0
You can avoid this repletion by creating a component say print-error which take the control as input.
print-error.ts
As of now there is only one @Input however if you want to customize further you can add some more @Input here.
import {Component, Input, OnInit, OnDestroy} from '@angular/core';
import {DragulaService} from 'ng2-dragula';
@Component({
selector: 'print-error',
templateUrl: './print-error.component.html',
providers:
})
export class PrintError{
@Input("control")
private control: any;
}
print-error.html
Add all kind of validation here. It will apply the error message accordingly.
<div class="text-danger" *ngIf="control && control.errors && (control.dirty || control.touched)">
<div><small *ngIf="control.errors.required">This field is required</small></div>
<div><small *ngIf="control.errors.unique">{{control.errors.unique}}</small></div>
<div><small *ngIf="control.errors.lessThanValidator">{{control.errors.lessThanValidator}}</small></div>
<div><small *ngIf="control.errors.greaterThanValidator">{{control.errors.greaterThanValidator}}</small></div>
</div>
Usage
<input required name="subject" #subject="ngModel" [(ngModel)]="subject">
<print-error [control]="subject"></print-error>
answered Nov 13 '18 at 11:07
Sunil SinghSunil Singh
6,1472626
You can avoid this repletion by creating a component say print-error which take the control as input.
print-error.ts
As of now there is only one @Input however if you want to customize further you can add some more @Input here.
import {Component, Input, OnInit, OnDestroy} from '@angular/core';
import {DragulaService} from 'ng2-dragula';
@Component({
selector: 'print-error',
templateUrl: './print-error.component.html',
providers:
})
export class PrintError{
@Input("control")
private control: any;
}
print-error.html
Add all kind of validation here. It will apply the error message accordingly.
<div class="text-danger" *ngIf="control && control.errors && (control.dirty || control.touched)">
<div><small *ngIf="control.errors.required">This field is required</small></div>
<div><small *ngIf="control.errors.unique">{{control.errors.unique}}</small></div>
<div><small *ngIf="control.errors.lessThanValidator">{{control.errors.lessThanValidator}}</small></div>
<div><small *ngIf="control.errors.greaterThanValidator">{{control.errors.greaterThanValidator}}</small></div>
</div>
Usage
<input required name="subject" #subject="ngModel" [(ngModel)]="subject">
<print-error [control]="subject"></print-error>
answered Nov 13 '18 at 11:07
Sunil SinghSunil Singh
6,1472626
answered Nov 13 '18 at 11:07
Sunil SinghSunil Singh
6,1472626
answered Nov 13 '18 at 11:07
Sunil SinghSunil Singh
6,1472626
answered Nov 13 '18 at 11:07
Sunil SinghSunil Singh
6,1472626
6,1472626
I want to dynamically add a div below my input field where ever they are applicable for eg if i dont fill name field,i get error for name, the dynamic div should say "Please enter Name"(this msg will come from service)
– Tanvi Shan
Dec 26 '18 at 13:29
You can get the name fromcontrolinPrintError. Or you can add one more@Inputfor name.
– Sunil Singh
Dec 26 '18 at 15:17
add a comment |
I want to dynamically add a div below my input field where ever they are applicable for eg if i dont fill name field,i get error for name, the dynamic div should say "Please enter Name"(this msg will come from service)
– Tanvi Shan
Dec 26 '18 at 13:29
You can get the name fromcontrolinPrintError. Or you can add one more@Inputfor name.
– Sunil Singh
Dec 26 '18 at 15:17
I want to dynamically add a div below my input field where ever they are applicable for eg if i dont fill name field,i get error for name, the dynamic div should say "Please enter Name"(this msg will come from service)
– Tanvi Shan
Dec 26 '18 at 13:29
I want to dynamically add a div below my input field where ever they are applicable for eg if i dont fill name field,i get error for name, the dynamic div should say "Please enter Name"(this msg will come from service)
– Tanvi Shan
Dec 26 '18 at 13:29
You can get the name from
control in PrintError. Or you can add one more @Input for name.– Sunil Singh
Dec 26 '18 at 15:17
You can get the name from
control in PrintError. Or you can add one more @Input for name.– Sunil Singh
Dec 26 '18 at 15:17
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53279188%2fform-validations-without-ngif-how-can-i-use-form-validationsfrom-service-wit%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
