I have an input field where I need to set validations. I have used 2 patterns for the same:
^[1-9][0-9]*$
^\s|\s$
How do I combine these into one or is there a way to use them together?
This is a custom password validation.
<mat-form-field>
<input type="password" name="password" ngModel matInput placeholder="Password" #passwordInput="ngModel" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&].{8,}$" required>
<mat-error *ngIf="passwordInput.invalid">Should contain; 8 characters,
a number, a special character , a lower letter and a upper letter.</mat-error>
</mat-form-field>
You can combine regular expressions with the | operator. Like this:
/(^[1-9][0-9]*$)|(^\s|\s$)/
For more info about the RegExp operators check the docs.
Related
I have the task of using a password field which checks if it has at least 8 characters, consists of at least 1 uppercase character, 1 lowercase character and 1 digit. How can I do this in the HTML input field using the pattern attribute?
Thank you.
You can use pattern for validation.
<input type="password" id="pass" name="pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
You can learn more here
However, if you ever wanted to use some javascript, then HTML5 does enable some validation, even pattern matching, but I'm pretty sure you'd need some javascript to have this working and also compare the two values with confirm password field as well.
You can try this
<input id="password" name="password" type="password" pattern="^\S{8,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Must have at least 8 characters' : ''); if(this.checkValidity()) form.password_two.pattern = this.value;" placeholder="Password" required>
<input id="password_two" name="password_two" type="password" pattern="^\S{8,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');" placeholder="Verify Password" required>
So I have an input field that only accepts numbers, but it still suggests strings I have tried to search for previously.
Been searching how I can make it only suggest numbers but have come up empty.
The html code looks like this:
<mat-form-field floatLabel="never" [formGroup]="quickSearchForm" (keyup.enter)="quickSearch()">
<input #quickInput
type="number"
#tooltip="matTooltip"
class="filter-input"
(focusin)="tooltip.show()"
matTooltip="{{ 'order.list.buttons.quick-find-expectations' | translate:locale.language }}.."
matTooltipPosition="above"
matInput
formControlName="quickSearchId"
placeholder="{{ 'order.list.buttons.quick-find' | translate:locale.language }}.." />
</mat-form-field>
Can you edit your main post and add the html code for this input ?
I think that the input is not with type number.
Doc reference : https://www.w3schools.com/tags/att_input_type_number.asp
How do I make my input field only accept numbers (don't allow ANY letters to be inputted) and also hide the inputted values? It is taking a sensitive number. This also needs to keep the max and minlength validation at 4.
Here is what is not working:
<input matInput type="password" pattern="[0-9]*" minlength="4" maxlength="4" placeholder="Last Four of SSN" formControlName="ssn" required>
Try this regex for your pattern
[pattern]="'^[0-9]{4}$'"
Do not forget to set also the angular validator for this form field (own validator or pattern validator)
I have a problem, I would like to do this:
<mat-form-field>
<mat-label>Period:</mat-label>
<input matInput [value]="period.month / period.year" disabled>
</mat-form-field>
But that does not work.
On the other hand, this works:
<mat-form-field>
<mat-label>Period:</mat-label>
<input matInput [value]="period.year" disabled>
</mat-form-field>
Would anyone have a solution to display multiple variables in the value of an input?
EDIT: [ngValue] does not work, I want to display a string of variables.
Since [value] needs a string, you could set its value to
[value]="period.month + '/' + period.year"
which resolves to a string. In your code, period.month is divided by period.year and resolves to NaN if at least one of them cannot be changed to a number.
I think[value] only supports strings. Try [ngValue] instead.
Differences between value and ngValue in Angular 5
[value] always accepts String as an input, but [ngValue] accepts Object. Try using [ngValue]
Currently I have built a password form like this.
<input id="password" name="password" type="password" minlength='6' ng-model="model.password"
placeholder="Password"
required/>
Here password length is more than 6.
But default users have no password and allow 0 length password.
I have no idea how to do this.
Must look like this(not using javascript)
<input id="password" name="password" type="password" length='0 || > 6' ng-model="model.password"
placeholder="Password"
/>
Is this even possible?
You want to use this:
<input id="password" name="password" type="password" ng-model="model.password" placeholder="Password" pattern="|.{6}.*" />
required enforces the field must be non-empty. Do not use it.
The number in the code means minimum lenght. See description.
Description:
Use a pattern attribute here. It defines a RegEx (regular expression) that describes the content. The check is done by browser. Check it also on server-side.
Example:
<input pattern="|......+" />
Pattern description:
| means "or" (Empty string (left side) or ......+ (right side))
. means any character (only one)
.+ means one or more characters.
Use more dots (.) to set longer string.
If you want to use number, use this:
<input pattern="|.{6}.*">
The number between { and } is length.
.{number} means a string with fixed length.
.* means a string (0 or more characters)