how to validate field in angular reactive form?

Question

I am trying to validate my form in angular using reactive form .There is few fields example card name in which user enter only string

so he try to enter anything other than string I need to show invalid message .I tried like this

https://codesandbox.io/s/jzq6nn6zz9

constructor(private fb: FormBuilder) {
    this.paymentForm = this.fb.group({
      cardname: [
        "",
        [(Validators.required, Validators.pattern("[a-zA-Z][a-zA-Z ]+"))]
      ],
      cardnumber: [""],
      dateofexipiredate: [""],
      dateofexipireyear: [""],
      cvc: [""]
    });
  }

when I run my application my form is already valid why ? it should only valid when user enter string

Instead of waiting for an answer (it's gonna be a long one so not many people want to spend time writing something that is already explained in detail in Angular guide), read up https://angular.io/guide/reactive-forms — codeepic, Jul 20 '18 at 08:57

score 1 · Accepted Answer · answered Jul 20 '18 at 09:01

1

Remove extra brackets () in form Validators array. Validators should be sent as an array. After adding (), they are being treated as one single item, which is giving false results.

this.paymentForm = this.fb.group({
      cardname: [
        "",
        [Validators.required, Validators.pattern("[a-zA-Z][a-zA-Z ]+")] // see this line
      ],

Stackblitz

answered Jul 20 '18 at 09:01

Amit Chigadani

28,482
13
80
98

hi it is correctly work but why it is invalid when I type `a` or when I type `any charter` .after tying second character it show valid – user5711656 Jul 20 '18 at 09:11
Because of your validation `Validators.pattern("[a-zA-Z][a-zA-Z ]+")` which requires minimum of 2 characters – Amit Chigadani Jul 20 '18 at 09:12
If you want only one, then you may do `Validators.pattern("[a-zA-Z]+")` – Amit Chigadani Jul 20 '18 at 09:14
can you please tell me one more thing how I will add pattern of `16` digit card number ..user only enter number in card number and which exact `16` – user5711656 Jul 20 '18 at 09:17
Check the post https://stackoverflow.com/questions/9315647/regex-credit-card-number-tests That should help you. – Amit Chigadani Jul 20 '18 at 09:19
Hi i don't want to validate card number .I want user only type number which have length 16 – user5711656 Jul 20 '18 at 09:25
Ok, You are looking for some mask. This library should help you https://www.npmjs.com/package/angular2-text-mask You can modify according to your requirement. – Amit Chigadani Jul 20 '18 at 09:34

score 1 · Answer 2 · answered Jul 20 '18 at 09:02

Write 1 custom Validator for this task. I have added 1 sample here, just change your condition in the validator.

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

export function SameEmail(control: AbstractControl) {
    let email = window.localStorage.getItem("user");
    if (control.value == email) {
        return { validEmail : true };
    } else {
        return null;
    }
   
}


this.customForm = this.formBuilder.group({
        'email': new FormControl(this.customForm.email, [
          Validators.required,
          SameEmail
        ])
      });

<div *ngIf="form.email.invalid && (form.email.dirty || form.email.touched)" class="alert alert-danger">
              <div *ngIf="form.email.errors.required">
                Error 1
              </div>
              <div *ngIf="form.email.errors.validEmail">
                Error 2
              </div>
            </div>

score 0 · Answer 3 · answered Jul 20 '18 at 09:03

Just add Validators.minLength(1) sure he enter at least one character and Validators.pattern("[a-zA-Z][a-zA-Z ]+") will check if he enter valid name

constructor(private fb: FormBuilder) {
    this.paymentForm = this.fb.group({
      cardname: [
        "",
        [Validators.required, Validators.pattern("[a-zA-Z][a-zA-Z ]+"),Validators.minLength(1)]
      ],
      cardnumber: [""],
      dateofexipiredate: [""],
      dateofexipireyear: [""],
      cvc: [""]
    });
  }

score 0 · Answer 4 · answered Jul 20 '18 at 09:06

You can use formGroup error checking to make sure it works properly. yourForm.get('cardname').hasError('required') You can also check add some extra div in your HTML that will be displayed when user is doing something wrong in real time. Here's example with checking if element is required:

<div *ngIf="yourFormGrup.get('cardname').hasError('required')">Card name is required.</div>

It will be visible only when your form group contains specified error. Here's some extra reading for you that should help You out.

how to validate field in angular reactive form?

4 Answers4