The custom validation feature in Angular 4 is failing to function as expected

Question

The custom validation feature in Angular 4 is failing to function as expected

Currently, my focus is on Angular 4 where I have developed a custom validator for checking CGPA values (to ensure it is between 2.0 and 4.0). Although the predefined `Validators.required` works fine, my custom validator seems to be not triggering as expected in the component.ts file.

Below is the implementation of the CGPA Validator:

 function ValidCgpa(cgpa: FormControl): {[s: string]: boolean}  {
  let num = Number(cgpa);

  if(num < 2.0 || num > 4.0)  {
    return {invalidCgpa: true};
  }
 }

Usage of Custom CGPA Validator:

this.educationalDetailsForm = new FormGroup({
  cgpa: new FormControl('', Validators.compose([Validators.required, ValidCgpa]))
});

Here's the corresponding HTML Code snippet:

<input type="text" formControlName="cgpa" placeholder="CGPA">

<div *ngIf="educationalDetailsForm.hasError('ValidCgpa','cgpa') && educationalDetailsForm.get('cgpa').touched">
   Enter a number greater than 2.0 and less than 4.0 for CGPA
</div>

angular typescript

Answer 1

Answer №1

Your validator implementation seems to be incorrect. Perhaps you could consider the following approach (untested):

export function ValidateCGPAFormat(regex: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const cgpaValue = Number(control.value);
    if(cgpaValue < 2.0 || cgpaValue > 4.0)  {
       return {invalidCGPA: true};
    }
  };
}

Answer 2

Your validator implementation seems to be incorrect. Perhaps you could consider the following approach (untested):

export function ValidateCGPAFormat(regex: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const cgpaValue = Number(control.value);
    if(cgpaValue < 2.0 || cgpaValue > 4.0)  {
       return {invalidCGPA: true};
    }
  };
}

Answer 3

Answer №2

Utilize this method

Implementing a Custom Validator

import { AbstractControl } from '@angular/forms';

export function ValidateGpa(control: AbstractControl) {
  const num = Number(control.value);
  if (num < 0 || num > 4.0) {
    return { invalidGpa: true };
  }
  return null;
}

Incorporate in HTML

<h1>Enter GPA and Verify</h1>
<input type="text"  [formControl]="gpa">
<br>
<div *ngIf="gpa.errors?.invalidGpa">Invalid GPA value</div>

In TypeScript File

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ValidateGpa } from './validators/valid-gpa.validator';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  gpa = new FormControl('', [Validators.required, ValidateGpa]);
}

Experiment with this demo on stackblitz

Answer 4

Utilize this method

Implementing a Custom Validator

import { AbstractControl } from '@angular/forms';

export function ValidateGpa(control: AbstractControl) {
  const num = Number(control.value);
  if (num < 0 || num > 4.0) {
    return { invalidGpa: true };
  }
  return null;
}

Incorporate in HTML

<h1>Enter GPA and Verify</h1>
<input type="text"  [formControl]="gpa">
<br>
<div *ngIf="gpa.errors?.invalidGpa">Invalid GPA value</div>

In TypeScript File

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ValidateGpa } from './validators/valid-gpa.validator';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  gpa = new FormControl('', [Validators.required, ValidateGpa]);
}

Experiment with this demo on stackblitz

Answer 5

Answer №3

My preference would be to conduct the validations directly on the HTML, shown in the code snippet below:

<input type="number" required name="cgpa" [(ngModel)]="cgpaValue" #cgpa="ngModel">

<div *ngIf="cgpa.touched && (!cpga.valid || cpga.value < 2 || cpga.value > 4 )">
    CGPA must be greater than 2.0 and less than 4.0 
</div>

Answer 6

My preference would be to conduct the validations directly on the HTML, shown in the code snippet below:

<input type="number" required name="cgpa" [(ngModel)]="cgpaValue" #cgpa="ngModel">

<div *ngIf="cgpa.touched && (!cpga.valid || cpga.value < 2 || cpga.value > 4 )">
    CGPA must be greater than 2.0 and less than 4.0 
</div>

The custom validation feature in Angular 4 is failing to function as expected

Answer №1

Answer №2

Answer №3

Similar questions

When trying to import a module in Angular, an error is encountered while using Scully

Utilizing Angular 9's inherent Ng directives to validate input components within child elements

Error: The class you are attempting to access is

Angular 6 - Deleting the node_module package to streamline local project modifications

Having trouble with Nextjs API Integration - encountering error 404

Why is it necessary to redefine the interface and its class in Typescript after initially defining the interface with implements?

What is the best way to utilize moment.js for adding days while excluding weekends?

"Issues with Ionicons displaying a 404 error in the latest Ionic

ngFor failing to properly update when new data is pushed

What is the best way to maintain the correct 'this' context for a function that is outside of the Vue

What steps should I take to correct the scoring system for multi-answer questions in my Angular quiz application?

Angular 2 failing to properly set headers for HTTP requests

Should private members be kept confidential during program execution?

Exploring the benefits of event subscription nesting

Angular functions fail to update the loop variable

Begin by executing the angular repository on your local machine

What is the best way to convert Observable<Observable<{...}>[ ]> to Observable<{...}[ ]>?

Vue 3 Composable console error: Unable to access properties of undefined (specifically 'isError') due to TypeError

Resetting the Angular2 poller in an ng-bootstrap accordion

React TypeScript - Module not found