Form validation without form tag on input - Angular 2
14,364
Solution 1
'Validation' based on ngModel
<input type="text" required name="title" [(ngModel)]="titleModel">
<span style="color:red" *ngIf="titleModel?.length > 10">
10 max
</span>
<span style="color:red" *ngIf="!titleModel">
required
</span>
<button [disabled]="titleModel?.length > 10 || !titleModel">OK</button>
'Validation' based on local template variable:
<input type="text" (keyup)='0' #title>
<span style="color:red" *ngIf="title.value.length > 10">
10 max
</span>
<span style="color:red" *ngIf="!title.value">
required
</span>
<button [disabled]="title.value.length > 10 || !title.value">OK</button>
Solution 2
You need to use FormControl
from the reactive forms API, which can be used with a standalone <input>
that's not wrapped into a <form>
tag.
Component({
...
template: `<input type="text" [formControl]="name">`
})
class MyComponent {
name = new FormControl('',
[Validators.required, Validators.minLength(3)]);
}
Author by
John Theoden
Updated on June 04, 2022Comments
-
John Theoden about 2 years
I have popup component in which I want to insert form validation on input element for name (required field and minlength 3 characters). Is is possible to do it without setting up complete code in form tag?
<div class="scenario-div"> <label style="font-size: 1.4rem; font-weight: 400; margin-bottom: 10px;">{{context.header}}</label> <div class="" style="width: 90%; margin-bottom: 10px; align-self: center;"> <div style="display: flex; flex-direction: column; margin-bottom: 10px;"> <label style="font-size: 1.2rem; font-weight: 500;">Name</label> <div style="display:flex; flex-direction:row;"> <input type="text" [(ngModel)]="context.name" placeholder="enter Name" style="color: #569bd2; margin: 0px; width: 50%" minlength="3" required/> <select *ngIf="context.showOptionDropdown" class="custom-select-project" style="width:50%" #optionSelect (change)="context.option.value"> <option disabled>Select type</option> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> </select> </div> </div> <div style="display: flex; flex-direction: column; margin-bottom: 10px;" *ngIf="!context.hideDescription"> <label style="font-size: 1.2rem; font-weight: 400;">Description</label> <textarea rows="4" [(ngModel)]="context.description" cols="50" maxlength="250" placeholder="Enter text here" style="color: #569bd2; resize: none; font-weight: 400; font-size: 1.2rem;"></textarea> </div> </div> <div> <button class="btn-main" (click)="confirm(context)" style="width: 15%;">Confirm</button> </div>
-
John Theoden over 6 yearsOk, I got it and creating spans for value.length works fine, but I still am able to do submitt ... I need to lock submit if my length is less then 3 characters.
-
Vega over 6 yearsI don't see any form tag in your snippet
-
John Theoden over 6 yearsBut there is none ...That is the question ...How can I do form validation, but without form tag. However, thaks to you, i can manage to hide submit button until user enters more than 3 characters :)
-
Vega over 6 yearsIf there is no form how do you have submit? You mean an action on a plain button? Then, you hide the button based on the condition or check in the class for the model/value length with if-else
-
John Theoden over 6 yearsYes, click action that triggers submit, so now works like charm with ngIf and length
-
John Theoden about 6 yearsSorry ...my bad ...had some editing on question...will fix it now