What is the process for marking a form field as invalid?

Is it possible to validate the length of a field after removing its mask using text-mask from here? The problem is that the property "minLength" doesn't work with the mask. How can I mark this form field as invalid if it fails my custom validation method?

checkDigitsCPF() {
  const numDigits = _.replace(this.advogado.cpf, /\D/g, '').length;
  this.isCPFInvalid = !_.isEqual(numDigits, 11);
}
<div class="form-group">
  <label class="form-control-label" for="field_cpf">CPF</label>
  <input type="text" class="form-control" name="cpf" id="field_cpf" [(ngModel)]="advogado.cpf" required [textMask]="{mask: cpfMask}" (ngModelChange)="checkDigitsCPF()" minlength="11" />
  <div [hidden]="!(editForm.controls.cpf?.dirty && editForm.controls.cpf?.invalid)">
    <small class="form-text text-danger" [hidden]="!editForm.controls.cpf?.errors?.required" jhiTranslate="entity.validation.required">
      This field is required.
    </small>
    <small class="form-text text-danger" [hidden]="!isCPFInvalid">
      This field must have at least 11 characters.
    </small>
  </div>
</div>

htmlcssangulartypescriptangular5

Answer №1

When it comes to the element, the validation method should be structured as follows:

// this method will be activated whenever there is a change in value or when the form is submitted

validateField(inputForm): void {
    if (errorCondition) {
        inputForm.controls.fieldName.setErrors({'customLengthError': true})
    } else {
        inputForm.controls.fieldName.updateValueAndValidity()
    }
}

Within the html form, you can display the error message like so:

<small *ngIf="fieldName?.errors?.customLengthError">
    The specific error message.
</small>

Answer №2

Success! I managed to find the solution by developing a personalized directive.

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

Would it be considered improper to apply ID's to DOM elements for the purpose of automation, as it may transform their CSS classes into individual entities?

Just thinking about the best approach for Automation (such as Selenium). I've been advised against using IDs on elements, as it could result in JS errors (in case of duplicate IDs) and make CSS classes unique. While I see the point, not having IDs can ...

javascripthtmlcssautomation

What is the best way to alter the Date format in Typescript?

Within my response, the field createdate: "2019-04-19T15:47:48.000+0000" is of type Date. I am looking to display it in my grid with a different format such as createdate: "19/04/2019, 18:47:48" while maintaining its original data type. To achieve this, I ...

angulartypescript

Getting a "module not found" error in Next.js while trying to import a TypeScript

Check out this code snippet: // lib/customFunction.ts export function customFunction() { console.log("customFunction"); } // pages/homepage.tsx import { GetServerSideProps } from "next"; // works import { exampleFunction } from "../lib/exampleFile.js" ...

typescriptnext.jses6-modules

Accessing the currently operating WS server instance with NodeJS

After successfully setting up a basic REST API using NodeJS, ExpressJS, and routing-controllers, I also managed to configure a WebSocket server alongside the REST API by implementing WS. const app = express(); app.use(bodyParser.json({limit: "50mb"})); a ...

node.jstypescriptexpresswebsocket

Encountering difficulties when attempting to load a module with the "js" extension in a TypeScript environment

When making a GET request with Systemjs, the extension .js is not being added to the URL. These are my TypeScript Classes customer.ts import {Address} from "./Address"; export class Customer { private _customerName: string = ""; public Customer ...

javascripttypescriptvisual-studio-2013systemjs

Automatic completion of absolute paths in VS Code with the ability to click and view definitions through the configuration file js/tsconfig.json

In order to ensure that absolute paths function correctly, I have found that there are two key steps involved: the compilation process and configuring the code editor. I successfully managed the compilation aspect by utilizing babel-plugin-module-resolver ...

reactjstypescriptvisual-studio-codenext.jsjsx

Implementing redux-persist with redux toolkit using TypeScript

Currently, I have been utilizing Redux Persist in my next js application but now I am interested in incorporating redux toolkit with TypeScript. While I have managed to grasp the syntax for implementing redux-persist in redux toolkit, I am struggling to ...

reactjstypescriptnext.jsredux-toolkitredux-persist

Responsive Image Resizing with Bootstrap for Smaller Screens

I'm struggling to resize a responsive image in Bootstrap using the carousel example on their official website. <div class="container"> <div class="other-div"> .... </div> <div id="carouselExampleCon ...

csstwitter-bootstraptwitter-bootstrap-4

Using jQuery to implement multiple FadeIn effects

Here is the code that I have written: $('.frame').each(function(){ $(this).click(function(e){ var id = $(this).attr('id'); e.preventDefault(); $('.active').removeClass('active').fadeOut(8 ...

jqueryhtmlfadein

The format must be provided when converting a Spanish date to a moment object

I am working on an Angular 5 project where I am converting dates to moment objects using the following code: moment(date).add(1, 'd').toDate() When dealing with Spanish locale and a date string like '31/7/2018', the moment(date) funct ...

angulartypescriptangular5momentjs

What is stopping this paragraph from being vertically centered with just one line?

After following instructions from another user, I successfully centered text vertically. However, I encountered difficulties when trying to center the entire content vertically. My attempt to enclose the text in its own div did not yield the desired result ...

csshtml

Creating unique CSS classes for custom forms in Web2py

What is the best way to assign a custom web2py form's class? for example: {{=form.custom.begin}} Image name: <div>{{=form.custom.widget.name}}</div> Image file: <div>{{=form.custom.widget.file}}</div> Click here to upload: {{= ...

pythoncssweb2py

Display a scrollbar for the offspring of an element with a flex-grow value of 1

I'm seeking to create a straightforward design consisting of a layered header, main section, footer. My framework of choice is bootstrap 5. The complete layout should occupy all available width and height, with overflow (x and y) set to hidden. Hea ...

cssbootstrap-5

jQuery Super-sized Not Expanding Vertically

I am facing an issue with resizing a 1920x1200 background image using jQuery Supersized. Whenever I resize the browser, there is a gap that appears vertically instead of filling up to compensate for the width constraint. I have checked and copied the sett ...

jquerycsssupersized

What is the reason that specifying the type of function parameters does not result in conversion being

Seeking clarity here. I have a TypeScript function (using version 1.7) that is linked to the change event of a select dropdown in HTML: toggleWorker(stsID: number): void { // get status object by selected status ID let cStatus: Status = this.s ...

typescriptangular

The argument type 'string' does not match the parameter type 'keyof Chainable' in Cypress JavaScript

Trying to incorporate a unique custom command in Cypress (commands.js file) as follows: Cypress.Commands.add("login", (email, password) => { cy.intercept('POST', '**/auth').as('login'); cy.visit(& ...

javascripttypescriptcypress

Silhouette as the backdrop image

There is a span element that I am using in the following way - <span class="tick"></span> This creates a decorative "tick" for a checkbox. The CSS code used for this is - input[type="checkbox"] + span > span.tick { display: block; ...

htmlcss

What is the best way to list the choices associated with a specific category?

The Node.js package I'm currently working with requires an argument of a specific type, which I can see is defined through a TypeScript declaration as follows: export declare type ArgType = 'A' | 'B' | 'C'; I am interes ...

javascriptnode.jstypescripttypes

Dynamically loading Angular modules based on API response is a powerful way to enhance

Can modules be lazily loaded in Angular without a static declaration in the RoutingModule? Right now, each module is declared in the RoutingModule. { path: 'path-one', loadChildren: () => import('./components/PathOne').then(m =&g ...

angulares6-moduleswebpack-module-federation

What steps are involved in uploading data to serve as a filter while running a PHP script to retrieve data from an SQL database?

Currently, I am retrieving data from a PHP file using miniAjax. The code snippet below demonstrates how the process begins: microAjax("genjsonphp.php", function(data) { var json = JSON.parse(data); var points = json; //code continues In the c ...

javaphpjavascripthtmlajax