Angular 2+ validation patterns, syntax and properties. Validation of forms, controls, models using various Angular 2+ validation directives.
Angular's built-in form properties are there to help us with client-side validation.
You can either:
Questions tagged [angular-validation]
425 questions
6
votes
1 answer
Angular reactive form, Dynamic validator not updating control validity
So I have a form where a control is required only if another control has a value, for this I created the following structure
profileGroup = this.fb.group({
username: [''],
address: [
'',
[
(control: AbstractControl) => {
if…
Jhoan Nicolas Andres Becerra Q
- 543
- 4
- 14
6
votes
3 answers
Angular 7 custom validation with dynamic/updated param
I am using angular 7 with material design components
I have requirement to add requireMatch validation to mat-autocomplete.
I have created custom validation with param but param value does change dynamically.
Below is my component…
Ankur Akvaliya
- 2,989
- 4
- 28
- 53
6
votes
1 answer
Make parent FormGroup invalid until nested FormGroups Valid - Custom Validator for a FormGroup
I have an Angular 7 project for dynamically creating forms. I have one parent FormGroup with nested FormGroups of various types.
I want parentForm to be invalid until all of the nested/subforms are valid (actually want them submitted but haven't…
azulBonnet
- 831
- 4
- 14
- 31
6
votes
2 answers
How to pass params to async validator for reactive angular control?
Problem,
I am using the same component for read/edit routines. async-validator works perfectly with new entries. the problem starts if the user accidentally changes the value and tries to revert back to the saved value. my current code will run…
JSON
- 1,583
- 4
- 31
- 63
6
votes
2 answers
setValidators in custom control without from reference in Angular
i have created a custom input control. I don't want to create any custom validation. I want to use default required, minLength, maxLength etc.I know i can do like this
this.form.controls["firstName"].setValidators([Validators.minLength(1),…
Pritam Parua
- 672
- 2
- 8
- 27
6
votes
2 answers
Angular Clear form control errors
How to clear the errors on form control. I have a method that tries to clear the errors on the form control but in vain.
this.form.controls[ 'postalCode' ].setErrors(null);
The form control name is postalCode and when I set the error to null, it…
Karthikeyan Mohan
- 319
- 2
- 4
- 11
6
votes
1 answer
Angular 2 validator not working as expected
I got this validator:
export const PasswordsEqualValidator = (): ValidatorFn => {
return (group: FormGroup): Observable<{[key: string]: boolean}> => {
const passwordCtrl: FormControl = group.controls.password;
const…
Chrillewoodz
- 27,055
- 21
- 92
- 175
5
votes
4 answers
How to add error to child form controls in angular without silencing child's own validators
this.form = this.fb.array([
this.fb.group({
username: [null, Validators.required]
}),
this.fb.group({
username: [null, Validators.required]
}),
...
], uniqueUsernameValidator)
const uniqueUsernameValidator = control => {
//…
user2167582
- 5,986
- 13
- 64
- 121
5
votes
3 answers
How to do and show server validation errors in angular form
I'm new to angular. I was trying something and got stuck.
In my form, I want to show server validation response as error coming from a laravel rest api. But don't know how to store and show it in the template. I am able to log it to the console but…
Debarshi Bhattacharjee
- 689
- 1
- 11
- 18
5
votes
0 answers
How to validate ngx-select-dropdown on from submit?
I have a form in which i used ngx-select-dropdown with angular7. In my form select option is required. I want to validate it on form submitting. But my validate methods are not working with ngx-select-dropdown library, and in documentation of…
Nouman Ahmed
- 53
- 7
5
votes
4 answers
Debounce async Validator
I have a working async validator that does an HTTP request to the server to check if a username is already taken.
As I don't want to call the API after each keystroke I need to debounce the input stream.
I first had throttleTime in the service, but…
Hypenate
- 1,907
- 3
- 22
- 38
5
votes
2 answers
How to allow nested components to be tracked by their parent and get values from their parent in Angular?
I have a series of forms (each managed by 1 component).
There is a pattern of inputs in these forms (e.g. many of them require to allow input of an address) that I have to refactor into re-usable components as they are used in multiple forms and I…
Cec
- 1,726
- 3
- 18
- 31
5
votes
2 answers
How to trigger form inputs validation on first change in Angular
In my Angular 5 application I would like to override the default validation behaviour of some of my form inputs. In particular, I'd like to immediately trigger the field validation as soon as the user inserts something.
Currently the default…
Francesco Borzi
- 56,083
- 47
- 179
- 252
5
votes
1 answer
Angular 4 form, disabled field is always valid
Might seem like an odd form, but I simplified it for the sake of the question here, and that's not my actual form. But the same scenario happens here.
5
votes
3 answers
Accessing validator’s state inside a template for an control in a FormArray
I am using Angular’s reactive forms and would like to apply a css style to controls inside a FormArray depending on the value of the control’s invalid property. I have come up with the following approach but I think the expression inside the…
EricAZ
- 53
- 8