Reactive Form pattern Validation and form array validation?

Question

For reactive form validations i observed many tutorials and plunker links but i am not getting any site which solves my problem

problem 1: formgroup pattern is [aA-zZ0-9'-]$/)](allow no, characters, -,', space special charactes)

export class AppComponent implements OnInit {

  private myForm: FormGroup;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
        this.myForm = this.fb.group({
          'name': ['', [Validators.required,
                    Validators.minLength(3),
                    Validators.maxLength(10),
                    Validators.pattern(/[aA-zZ0-9'-]$/)]],

          'phoneNumbers': new FormArray([new FormControl('')])
        });
      }
}

for above that please check this plunker link

https://plnkr.co/edit/km7nGR8DjyE4l6tH5JEC?p=preview

Here if you observed name field it's working as per regular expression conditions in some cases

**case1-> aa -- not valid(minimum 3 characters),
case2-> aaa@ --not valid(special chararacter)
case3-> aaa@b -- valid(not giving any message)**

in above sceanarios case1, 2 is fine if you observe case3 input even it's not satisfiying regix rule it's not throwing any message I am not sure that my regix is right, my requirment is (min-3, max-10, allow no, characters, -,', space special charactes)

I am trying so many types, but every where i am getting same problem

problem2: How to apply custom validator for form arrays

Please give me best approach which will sutes all general use cases

Thanks in advance

Soumya

regex problem..check your regex in regex101.com

radio_head
– radio_head

2018-01-29 11:32:46 +00:00
Commented Jan 29, 2018 at 11:32 — radio_head
– radio_head, Commented Jan 29, 2018 at 11:32
can you tell me wright regix

Runali
– Runali

2018-01-29 11:37:22 +00:00
Commented Jan 29, 2018 at 11:37 — Runali
– Runali, Commented Jan 29, 2018 at 11:37
The regex you are looking for is maybe ^[A-Za-z0-9-' ]+$

radio_head
– radio_head

2018-01-29 11:54:23 +00:00
Commented Jan 29, 2018 at 11:54 — radio_head
– radio_head, Commented Jan 29, 2018 at 11:54
it's not working

Runali
– Runali

2018-01-29 11:58:37 +00:00
Commented Jan 29, 2018 at 11:58 — Runali
– Runali, Commented Jan 29, 2018 at 11:58
examples pleasee

radio_head
– radio_head

2018-01-29 12:36:24 +00:00
Commented Jan 29, 2018 at 12:36 — radio_head
– radio_head, Commented Jan 29, 2018 at 12:36

Max Amorim · Accepted Answer · 2019-02-21 10:27:41Z

Regarding array validation, if you want to validate the size of the array, you can build a custom validation like this:

  arrayLengthValidator(minimumLength: number): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    if (control.value.length < minimumLength) {
      return {'arrayLength': 'array length is invalid'};
    }
    return null;
  }; 
}

And then just add to your form like this:

this.myForm = this.fb.group({
      'name': ['', [Validators.required,
                Validators.minLength(3),
                Validators.maxLength(10),
                Validators.pattern(/[aA-zZ0-9'-]$/)]],

      'phoneNumbers': this.formBuilder.array([], this.arrayLengthValidator(1))
    });

Now if you want to check empty values on array elements, you can use validation as a Directive and add the selector to your input:

import { Directive } from '@angular/core';
import { Validator, NG_VALIDATORS, AbstractControl } from '@angular/forms';

@Directive({
  selector: '[appEmptyValue]',
  providers: [{provide: NG_VALIDATORS, useExisting: EmptyValueDirective, multi: true}]
})
export class EmptyValueDirective implements Validator {

      validate(control: AbstractControl): {[key: string]: any} | null {
           return control.value === '' ?  {'emptyValue': 'input value cannot be empty'} : null;
      }

}

And on the input:

<input type="text" appEmptyValue>

Rakesh A R · Accepted Answer · 2018-02-20 13:05:19Z

0

For case three the pattern is /^[a-zA-Z0-9-']*$/ .

For your requirment (min-3, max-10, allow no, characters, -,', space special charactes) = use this pattern if you don't need @ or $ just remove that /^[a-zA-Z0-9-' !@#$%^&]*$/

answered Feb 20, 2018 at 13:05

Rakesh A R

2061 gold badge3 silver badges17 bronze badges

Collectives™ on Stack Overflow

Reactive Form pattern Validation and form array validation?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related