Reactive For is always invalid when using dynamic patterns validation

Reactive Form having dynamic patten validation is always invalid on first load. Even after I edit it still invalid.

This is happening only when I am adding dynamic pattern matching validation.

Here is my use case :

  • On UI there is table and edit button in last row
  • Initially No formcontrols are visible
  • User Clicks on edit button then form control gets appear.

Refer this stackblitz

Below is code

<form [formGroup]="data_form">
    <table class="table table-border">

            <th><button class="btn btn-primary ">Save</button></th>
            <ng-container *ngFor='let item of data;let j = index'>
                    <ng-container *ngFor="let td of keys;let i = index">

                            <td  *ngIf="td !=='isEditable'">
                                <input   [formControlName]="getControlName(j,i)" *ngIf="item.isEditable" type="text" name="" id="">


                        <button (click)="item.isEditable = true"> Edit</button>


ts code :

import { Component } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";

  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
export class AppComponent {
  name = "Angular";
  data_form = new FormGroup({});
  public data;

  ngOnInit() { = [
        name: "Sachin",
        age: 27,

        isEditable: false
        name: "Gopal",
        age: 27,

        isEditable: false
        name: "Pankaj",
        age: 24,

        isEditable: false
    this.keys = Object.keys([0]);, j) => {
      this.keys.forEach((k, i) => {
          "name_" + j + "_" + i,
          new FormControl(element[k], [Validators.required, Validators.pattern(/^[.\d]+$/)])

  log() {

  getControlName(j, i) {
    return "name_" + j + "_" + i;

Thanks in Advance.


Various Patterns that I have used :

  • Validators.pattern("^[a-zA-Z0-9 _/]+$")
  • Validators.pattern(/^[.\\d]+$/)
  • Validators.pattern(/^(yes|no)$/i)
  • Validators.pattern(/^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/)

Read more here:

Content Attribution

This content was originally published by user1608841 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: