81 questions
7
votes
1
answer
6k
views
Angular Unit Test for Custom Validator FormGroup
How to unit test (Jest here) custom validator, which has FormGroup? I've seen this question, but it's about FormControl.
The function to be tested.
import { FormGroup } from '@angular/forms';
/**
* @...
- 10.9k
6
votes
2
answers
7k
views
Form stuck in PENDING status with async validator when value changed on construction
When using reactive forms with an async validator on the form group, and if changing the values of the form group by using patchValue in the constructor or in ngOnInit - even though the async ...
- 32.8k
5
votes
2
answers
19k
views
Angular: Trigger a form control validation on change of another form control
Please refer the project in a stackblitz
here.
As can be seen, I have reactive form with controls as firstNumber, secondNumber and thirdNumber. I need to have validation for form control thirdNumber ...
- 1,095
4
votes
1
answer
15k
views
setValidators doesn't work at all when set dynamically inside of a function
I am not sure why setValidators is not working in my below code. I am not sure what the issue is as it doesn't take any effect when I set the formControl as required. What I want to achieve is to ...
- 309
3
votes
1
answer
10k
views
Regex expression with Validators.pattern for just integer number
I am trying to create a validator for only integers (e.g., 60) using Regex.
Here how I am trying to do it:
meter: ["", Validators.required, Validators.pattern(/[0-9]/)]
It does not work, but I have ...
3
votes
2
answers
7k
views
Reactive forms angular show error for pattern in angular
I have reactive form like this
this.form = this.formBuilder.group({
email: ['', [
Validators.required,
Validators.maxLength(120),
Validators.pattern('^[^\\s@]+@[^\\s@]+\\....
- 6,862
3
votes
2
answers
2k
views
Angular Forms: How to avoid multiple NgIf divs for validation error messages?
I would like to simplify the code below:
<div *ngIf="form1.errors?.checkDate && (form1.touched || form1.dirty)" class="cross-validation-error-message alert alert-danger">
Date can't ...
- 548
2
votes
3
answers
4k
views
Angular Custom Async Validator Not Showing Error
My async validator is not working when I actually make an async call (but works when I mock it with Observable.of(result). The html looks like this:
<div class="form-group">
<...
- 12.8k
2
votes
1
answer
4k
views
Accessing formgroup in custom validator
I'm trying to add custom validator to my component.ts
customvalidatorFile:
import { FormGroup, ValidationErrors } from '@angular/forms';
export class ProfileCustomValidators {
static ...
- 1,352
2
votes
2
answers
7k
views
Get sibling AbstractControl from Angular reactive FormArray - Custom Validation
I'm having a Contact form in Angular using a Reactive form. The form contains firstName, lastName and an Array of address. Each address formgroup contains a checkbox, if the checkbox is checked, ...
- 4,933
2
votes
1
answer
9k
views
Password and Confirm Password match validation in ionic4 form
I have created a signup form in ionic4 with fields like first name, last name, email, password and confirm password.
I have added validations also like showing the fields are required if user left or ...
- 304
2
votes
4
answers
8k
views
Angular custom validator not firing when input untouched?
I have a reactive form as following:
this.form = this.formBuilder.group({
name: ['', Validators.required],
email: ['', this.customValidator()]
});
I also have a "submit" button with a [...
- 2,026
2
votes
1
answer
4k
views
Display cross field custom validation error message
In my reactive form i have built a custom validation for 3 input fields. The main function of the validation is to return a error when either 1/2 out of 3 input fields have a value (I want all 3 ...
- 138
2
votes
2
answers
249
views
Why aren't the validation errors in this custom Angular control visible from the parent component's form?
I'm working on my first custom control in Angular (16), for a Reactive Form, that contains a slider and an input. If the slider is true, then the input should have a value. If it is not, then the ...
- 8,611
2
votes
1
answer
840
views
Custom validator with parameter is not working for textbox and checkbox in angular
In my reactive form, I have a textbox and a checkbox. I want that when the checkbox is checked, then textbox can be null or empty. If checkbox is not checked then validation message should be shown ...
- 1,772
2
votes
1
answer
2k
views
Wait for async validators to finish angular forms
I have an angular form with custom aync validators
I want to do some stuff if the form is invalid on load.
Here is the code
ngOnInit() {
this.signupForm = this.fb.group({
name: [
...
- 506
2
votes
0
answers
484
views
ionic angular strange issue- custom form validator not getting called on android
I am working on ionic 4 angular mobile app.
I am facing one strange issue wherein custom form validation is not getting called on android device but its getting called and working as per expectation.
...
- 965
1
vote
1
answer
1k
views
Angular custom validator with http don't work
I try to make a custom validator who verify that a serial number exist in my database.
To do this, the custom validator must call an api endpoint.
This is my custom validator
import { Injectable } ...
- 57
1
vote
2
answers
2k
views
Where should I write my Validators in Angular 17?
I am using Angular 17, and I need to write some custom validators for my reactive typed forms. I was going to write them in the component where my form is declared, but I know these validators are ...
- 202
1
vote
1
answer
4k
views
Angular - Type '(c: FormControl) => ValidationError | null' is not assignable to type 'ValidatorFn'
In Angular-13 I have this code
validation-errors.ts:
import { ValidationErrors } from "@angular/forms";
import { FormArray, FormControl, FormGroup, ValidatorFn } from '@angular/forms';
// ...
- 1,067
1
vote
2
answers
90
views
Angular - Custom form validator
I have two mandatory form controls as: minimumCharacters and maximumCharacters. I want to show an error, if the given maximumCharacters is smaller than the given minimumCharacters.
Here is how I have ...
- 621
1
vote
1
answer
3k
views
Type 'null' is not assignable to type 'ValidationErrors'
So, my issue is I am trying to build a custom validator on Angular 15, and I get an error message that tells this:
Type 'Observable<{ titleAlreadyExists: boolean; } | null>' is not assignable ...
- 15
1
vote
1
answer
6k
views
Custom Validator Not Working in Angular Reactive Form
I am trying to create a custom validator that checks if a phone number already exists.
My code is as follows:
Validation Function
phoneValidator() {
return (control: AbstractControl): Observable&...
- 133
1
vote
1
answer
4k
views
Pass a dynamic parameter in reactive form custom validator
I would like to pass a variable as a parameter in a custom validator like this
newSimulation: new FormControl('', [uniqNameValidator(this.options)])
Then use it in my custom validator
export ...
- 5,315
1
vote
2
answers
929
views
How to use Built-in Angular validator within custom ControlValueAccessor
I have a custom component inheriting ControlValueAccessor on my application that integrate ng-select
The goal of this component is to have one central place where ng-select is integrated so I can re-...
- 5,102
1
vote
1
answer
42
views
Angular Form Group is not clearing conditional validator errors
I have a dropdown, and based on the selected option, I display specific form controls. For the dropdown option value2, I display an error message: "Please provide either the Body or both Username ...
1
vote
1
answer
988
views
Unsafe assignment of an `any` value Error on form variables (Angular Validators)
I am trying to get my form variables checked by eslint. Unfortunately, in this file:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/...
- 27
1
vote
1
answer
310
views
Angular Cross-field validation on Dynamic Form
I built a dynamic reactive form that reads a json file (or just json in general) and renders the form elemtns for the user here.
https://stackblitz.com/edit/angular-empty-project-qzjttt?file=app%2Fapp....
- 19
1
vote
1
answer
2k
views
Angular Reactive form not updating when FormGroup has new error
So I declare my FormGroup in ngOnInit() and that calls my validator function to ensure that password and confirmPassword fields are matching as so
My typescript
regForm: FormGroup;
constructor() { }
...
1
vote
1
answer
2k
views
Angular Custom Cross Field validation on the Form Group not working as expected for date field
I have a form with a Start Date and End Date. The Start date should be from the next day and End Date should be at least 7 days from Start. I am using Angular material datepicker and setting the ...
- 414
1
vote
2
answers
314
views
custom validator in angular4 material table results error
I am using angular4-material-table . there I tried to add custom input validation
I have created seperate validator service there I called custom function to hit my api based on api result it will ...
- 1,032
1
vote
0
answers
816
views
Jest unit test for angular custom validation to select atleast one control in formgroup
I'm writing a unit test with jest cases for angular custom validator which is user must select atleast one filter in formgroup. I'm new to angular unit test. Please let me know what I have missed?
...
- 291
1
vote
0
answers
88
views
Angular creating custom reactive form validator
I created simple ValidatorFn function:
requiredArrayLength(length: number): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
if (length >= 1) {
...
- 1,048
1
vote
1
answer
432
views
In Angular how can custom validators be used in material dialog template
I have a data entry form in a Material Dialog as a Template form. I want to apply some custom validators to some of its Input fields.
I'm not having any success making them fire (although I tested one ...
- 670
1
vote
1
answer
2k
views
Custom Validation in Angular is not working on KeyPress Event
I have 2 fields in a Form.
<input type='text' maxlength='2' formControlName="userIdMinLength"
class='e-input' (keypress)='omitSpecialCharacters($event);'>
<input type='text' maxlength='2' ...
- 701
0
votes
1
answer
2k
views
Angular custom validator for hours input in HHH:MM format
I need to validate input in hours and minutes but it is strange format of 6 characters in HHH:MM.
For example 30hrs and 15 mins is needed to be entered in the input like 030:15
My attempt to create ...
- 1,307
0
votes
1
answer
4k
views
How can validate invalidate date in angular by using custom validation
I am creating a date validator by using custom validator but when I print the error it shows null.
I am trying to enter inter date like 2222-22-22 it accept, here I have use custom validator to ...
0
votes
1
answer
3k
views
Mat error is not displaying error for custom validators but template is displaying error
app.component.html
<div class="col-sm-3">
<mat-form-field class="col-sm-3" appearance="outline"
...
- 761
0
votes
2
answers
110
views
Angular: Cyclic Dependency
Why is currentdate in this.currentdate.getTime() coming back as undefined?
newlisting = this.formBuilder.group({
availabledate: new FormGroup({
xyz: new FormControl()
},[this.mainservice....
0
votes
1
answer
87
views
Custom Validator on Angular logic gets implemented successfully but does not show the error message on my web page UI /HTML
so I was doing a custom validator on my Angular form which works in the following way:
excerpt from my component.ts file:
creteRoute(): FormGroup {
return this.fb.group({
'...
- 81
0
votes
1
answer
255
views
Async validator for unique userId not working
Inside service-
getUserIdToCheckDuplicate(userId:any):Observable<any>{
const url = ``; //url goes here
return this.http.get<any>(url);
}
Inside component-
ngOnInit(): void {
...
- 37
0
votes
1
answer
1k
views
Angular async validator check unicity of input in database
I have an <input> where the user enter a value that is supposed to be unique in database. I want to check dynamically in the front-end if that value is unique or not.
I want also to display an ...
- 112
0
votes
1
answer
176
views
What exactly is the error in my Validator class or the observable pipe that this error keeps occuring in my console?
Errors keep appearing on my console after a while. Can anyone please tell me is it because of the flaky API? I am a beginner in Angular
Async Validator Class:
import { AsyncValidator, FormControl } ...
- 43
0
votes
2
answers
1k
views
Exporting a validator for Angular reactive form
I am trying to create a ValidatorFn that will be used in several components which represent custom reactive form controls. My initial idea was to generate a TypeScript class, create a public static ...
- 1,593
0
votes
1
answer
648
views
How to separate 'Implemented Conditional Validation Service/Function' in Angular-8 while using Reactive-Forms
I have implemented conditional Validation in my Component.
I am trying to separate the validation logic from my component to another component/service.
Demo Link : http://StackBlitz%20https://...
- 1
0
votes
2
answers
72
views
it works, it was a mistake somewhere else. Create a custom validator
I'm customizing my form and creating my own validator. But I'm doing wrong, because it always crashes:
**my-component.ts**
export function ageRangeValidator(min: number, max: number): ValidatorFn {
...
- 3,758
0
votes
1
answer
319
views
Angular custom validator apply template for repetitive code
I have multiple input fields where almost same validation is required. Is there any way to reduce repetitive HTML code for displaying error.
My code is as below
<div colspan="2">
...
- 360
0
votes
0
answers
41
views
To set Validation And retain the error in the required field
I have three input fields: two dropdowns and one slider number field. In my custom validation, I utilize the form control names as strings within the service field to capture the value changes of the ...
0
votes
0
answers
42
views
Cross Field Validation for password not invoked/working
Clearly password and confirmPassword don,t match but still no error is being shownISSUE:
creating a password validator to cross check with confirm password if it does not matches(as shown in ...
0
votes
3
answers
998
views
Validate against NaN values for <input type="number">
I am creating a form using Angular Reactive forms, and for UX reasons I am trying to disable the form's submit when certain invalid values are inserted in an <input type="number"> ...
- 1