Is it possible to restrict user input in an input box to only specific characters such as '7' and '8'? I tried adding validations with attributes like type="number", min="7" and max="8", but even then other keys can be inserted before validation occurs. Is there a way to allow only certain characters before the validation messages appear?
Best regards, Alper
Here is my code snippet:
<input type="number" min="0" max="12" name="input8">
give this a shot
<form [formGroup]="form" (ngSubmit)="submit()">
<input type="number" min="0" max="12" name="input8" formControlName="input8" required>
<span *ngIf="input8.touched && input8.errors">
<span *ngIf="input8.errors.minlength">
please enter at least 7 digits
</span>
<span *ngIf="input8.errors.maxlength">
the number can't be more than 8 digits long
</span>
</span>
</form>
This specific component is created using React along with the "styled components" library to manage user input. In the case of invalid user input, the corresponding styles should be displayed as shown below (class invalid). Although this example functions ...
I am in the process of a lengthy transaction and I want to keep my client informed about its progress. On the frontend, I am using Angular 4 and on the backend, it's nodeJS/Express. The client triggers the transaction through an HTTP Post request. An ...
Can anyone help me figure out how to check the length of a child element in my Angular *ngFor loop? I am fetching data from a real-time firebase database. What am I doing wrong? Here is the code snippet I am using: <div *ngFor="let event of events"> ...
Previously, when I was using angular < 16, my routes configuration looked like this: { path: Section.Security, canActivate: [AuthGuard, AccessGuard, AdminGuard], children: [ { path: '', pathMatch: 'full', ...
I am encountering an issue with two angular apps, one acting as the parent and the other as the child within an iframe. The HTML structure is quite simple: <div class="first"> <label>{{postedMessage}}</label> </div> &l ...
Is there a way for me to display an error message when the submit button is clicked and none of the textarea fields are filled out? And how can I set it up so that the submit action only renders when at least one field is completed? Looking for the best ap ...
I'm encountering an issue where clicking on different labels should show corresponding modal dialogs, but it always displays the same modal dialog for both labels ("All Recommendations"). Can anyone offer guidance on how to resolve this problem? Thank ...
I have integrated the angula2-datetimepicker into my application by using the instructions from this source. Initially, I need to display an empty datepicker. Below is the code I am currently using: HTML: <angular2-date-picker [(ngModel)]="Model.Sele ...
Identify the Issue: I'm facing a challenge with invalidating my GET query to fetch a single user. I have two query keys in my request, fetch-user and id. This poses an issue when updating the user's information using a PATCH request, as the cach ...
Following the update of my project from Angular 7 to Angular 8 and resolving all errors caused by breaking changes, I am encountering a new issue: <div fxFill ngStyle.xs="overflow:auto"> This line is resulting in the following error: ERROR Type ...
I came across a solution that recommended separating Angular2 TypeScript files and JavaScript files into different folders like 'dist'. By following this, I moved my files to the 'app' and 'dist' folders. Interestingly, whenev ...
Could you lend me your expertise? I'm puzzled by this issue that seems to be quite simple and straightforward: export class Rectangle { height: number = 0 width: number = 0 constructor(height: number, width: number) { this. ...
My initial data is: const menuItems = [{id: 1, active: false}, {id: 2, active: false}] public menuSubject$ = new BehaviorSubject<MenuItem[]>(menuItems); public menu$ = this.menuSubject$.asObservable(); I am attempting to update the element with ...
Currently, I am in the process of transitioning a project from Angular 8 to version 15. One of the key features of the application is dynamic product cards, where the template for these cards is arbitrary HTML loaded from the server and unknown during deve ...
My Jest test file includes a simple import of a TSX component in my nextjs 13 project. However, when I try to use the component as a TSX tag, an error occurs: "'Properties' refers to a value, but is being used as a type here. Did you mean ...
Imagine a scenario where there is a function in a provider: saveCar(car: Car) { return this.saveCarImages(car).subscribe( (data:any) => { if(data[0].seats){ car=data[0]; } return this.api.put(`/car/${car.id}`, ca ...
I recently delved into using Next.js and I am a newcomer to backend technologies. I have successfully established a connection with MongoDB Atlas using Mongoose, however, the user object data from the post request is not being created as a document in th ...
The Address object values are not being retrieved as expected when requesting from the credit card component to a function called getAddress() in a config service that holds the value. Instead of the updated values, I am getting the initial values. Below i ...
I am looking to adjust this function so that it sends these two file ids in separate requests: return this.upload(myForm).pipe( take(1), switchMap(res => { body.user.profilePic = res.data.profilePic; body.user.coverPic = res.data.coverPic; ...
I have successfully implemented a functional component that renders a basic form with input elements. My goal is to allow users to dynamically add input elements by clicking a button. To achieve this, I am utilizing the useState hook and have created an o ...