Is there a way to validate user input in the front-end using my ANTLR grammar implemented in the back-end?

I have implemented a system using the ANTLR parser in Java for the backend of our software (frontend in Angular 2+). While the connection between the frontend inputs and backend logic is working well, there is a concern that users may input data with typos leading to server internal errors.

I am exploring options to validate user input before it is sent to the server, potentially providing suggestions based on the grammar file. I have come across examples utilizing ANTLR with JS / TS, but I prefer not to transition all the way from Java to JS and keep sensitive logic restricted to the backend.

Any recommendations on how I could create helpful files derived from my grammar file to at least verify validity?

Appreciate any insights you can offer.

javaangulartypescriptantlr4

Answer №1

To ensure the validity of user input, consider setting up a backend endpoint for validation and implementing a custom async validator in Angular to interact with this endpoint.

Here is a general concept...

form.component.ts

this.form = this._formBuilder.group({
  input: ['', [Validators.required, CustomValidator.checkValidity]]
});

custom.validator.ts

export class CustomValidator{
  static checkValidity(control: AbstractControl) => {
    const input = control.value; 
    // Make an asynchronous HTTP request to the server to validate the input.
    this.customService.checkInputValidity(input).map(res => {
      return res ? null : { invalidInput: true };
    })
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing XML with Enterprise JavaBeans

Can someone tell me which XML implementations support EJBs? Are there any specific ones like Saxbuilder? Thanks in advance ...

javaxmlejb

What is the best way to find out if an array index is within a certain distance of another index?

I'm currently developing a circular carousel feature. With an array of n items, where n is greater than 6 in my current scenario, I need to identify all items within the array that are either less than or equal to 3 positions away from a specific inde ...

javascriptarraystypescriptalgorithm

Struggling to configure Sass with @snowpack/app-template-react-typescript

I'm struggling to integrate Sass with the @snowpack/app-template-react-typescript template. I attempted to follow the steps outlined in this guide, but so far I haven't been successful. I even created a new project and tried adding it, but not ...

reactjstypescriptsasssnowpack

The performance of Ionic 2 app views starts to lag

I'm currently working on an app with Ionic 2 that involves a timer functionality. Initially, the timer operates smoothly with instant updates. However, when viewed in Ionic View, the update frequency significantly decreases over time. Even when tested ...

angularionic2

Exploring the potential of AssemblyScript in creating immersive WebXR

I have been exploring three.js and webXR for some time now, and I wanted to incorporate it into assembly script. While I know how to make webXR work in TypeScript, I encounter an error when trying to use it in assembly script with the import statement. Her ...

node.jstypescriptwebxrassemblyscript

What is preventing me from connecting to dockerized npm from my host machine?

Issue - A server running inside a docker container is not responding when accessed from outside the container on an OSX host. web: image: my_web build: context: ./ dockerfile: web.docker container_name: my_web networks: ...

angulardockernpmdocker-compose

What could be causing the issue with dayjs dynamic importing in TypeScript?

Currently, I am developing a web screen within a .NET application and facing an issue with sending datetime preferences from the system to the web screen using CefSharp settings. AcceptLanguageList = CultureInfo.CurrentUICulture.Name In my TypeScript code ...

javascripttypescriptrollupjs

How can we import the entire Jasmine library using CucumberJS?

I am currently trying to implement unit testing using Jasmine and CucumberJS in my Angular v9 application. I have followed the tutorial provided by cucumber.io to set up cucumber as the default runner. However, I am facing difficulties in using Jasmine met ...

typescriptjasminecucumbercucumberjs

Switching from MOCK API to real API in Angular: The step-by-step guide

I am a beginner in Angular and I am currently working on connecting a sample app to my API gateway called ContactApp. Right now, it is functioning with a mock API but I want to switch to using a real API server. I followed all the steps from a tutorial on ...

reactjsangularamazon-dynamodb

Determining WebElement Clickability in Java and Selenium: Beyond the Basics of isDisplayed, isEnabled, and findElement

There is a common method to test if a WebElement is clickable: It typically involves something like this: public static boolean isElementClickable(WebDriver driver, String accessor){ return driver.findElements(By.xpath(accessor)).size() > 0 & ...

javahtmlcssseleniumexception

In Angular with rxjs, make sure the response is set to null if the json file cannot be found during an http.get request

When working on my Angular app, I often retrieve data from a static JSON file like this: @Injectable() export class ConfigService { constructor(private http: HttpClient) { } getData() { this.http.get('/assets/myfile.json').subscribe(da ...

angulartypescriptecmascript-6rxjs

Difficulty Aligning Angular Material Expansion Panel with mat-nav-listI am facing an issue with

Currently, I have implemented a mat-nav-list to showcase the Menu items on my webpage. However, there seems to be an alignment issue with the 4th Menu item which is an Angular Material Expansion control. Refer to the screenshot provided below for clarifica ...

htmlcssangularangular-material

Angular triggers a reload of iframe content whenever there is a manipulation of the DOM

One of the challenges I'm facing is with dynamically loading an iframe when a specific condition is met. <div *ngIf="iframeData"> <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl(iframeData.iFrameUrl)" name="paymetricIFr ...

angulariframeangular2-changedetection

Discovering the power of chaining operators in RxJS 6 by encapsulating .map within

I am in the process of updating my Observable code from RXJS 5 to version 6. import { Injectable } from '@angular/core'; import { Observable } from 'rxjs' import { AppConfig } from '../config/app-config'; import { Xapi } from ...

angulartypescriptrxjs

Encountering a Spring POST 400 error in Postman when updating a class parameter from 2 to 1

Below is the code snippet from my @RestController class: @RequestMapping("api/") @RestController public class RecommendationsController { @PostMapping(path = "cart") public List<RecommendationDTO> getCartRecommendations(@NonNull @RequestBody Lis ...

javajsonspringpostmanbad-request

Adding a personalized service into a separate service within Angular 2

I am having trouble injecting my own service into another service. While I can inject standard Angular services like Http without any issues, attempting to inject custom services results in an exception. For example, here is how MyService is set up: impo ...

javascriptdependency-injectionangularionic2

What is the best way to simultaneously compare two lists and execute conditional actions based on the comparison results

While attempting to compare the checkbox status on a webpage with parameters set in an excel file, I encountered an issue where the checkboxes kept toggling endlessly. Below are the codes I tried: The method I used to retrieve data from Excel for compari ...

javaexcelseleniumselenium-webdriverapache-poi

Is there a way to reduce the version of npm in a nodejs project?

Despite many attempts made by others, I am still struggling to resolve this issue. I have experimented with the following: npm uninstall -g npm@<version> npm uninstall npm --save npm uninstall -g npm --save However, all my efforts have been unsuc ...

node.jsangularnpm

When is the right time to develop a Node.js application using Typescript with dockerization

Currently, I am developing a full stack TypeScript application using Express for the server and React for the client. The folder structure of my project is organized as shown below: . ├──client/ <-- React app ├──server/ <-- Express serve ...

node.jsreactjstypescriptdockerexpress

Android OnClickListener activates only after the second tap

It's strange that my OnClickListener is only triggered on the second click, while the OnLongClickListener works fine for the same View. I attempted using OnTouchListener but it conflicts with swiping gestures. The listeners are part of an Interface i ...

javaandroidkotlinandroid-edittextonclicklistener