Steps for creating a dynamic validation using a new form control

Question

Steps for creating a dynamic validation using a new form control

I have an item that needs to generate a form

const textBox = {
  fontColor: 'blue',
  fontSize: '18',
  placeholder: 'email',
  name: 'input email',
  label: 'john',
  validation: {
    required: false
  }
};

I developed a dynamic form but now I want to assign validators to each form control

ngOnInit(): void {
  const formDataObject = {} as any;
  for (const key of Object.keys(this.InputObj)) {
    debugger;
    if (key !== 'validation') {
      formDataObject[key] = new FormControl(this.InputObj[key]);
      this.formControls.push(key);
    }
  }
  this.form = new FormGroup(formDataObject);
}

I am looking to add validation rules to the form controls, but some objects may not require any validations

javascript angular typescript ecmascript-6 angular-reactive-forms

Answer 1

Answer №1

If you're looking to implement validation only when the required property within your validation object is true, follow these steps:

To begin, create a new instance of FormControl, and then utilize the addValidators method for dynamic validation addition:

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

const textBoxes = [
  {
    fontColor: 'red',
    fontSize: '20',
    placeholder: 'name',
    name: 'input name',
    label: 'mohamed',
    validation: {
      required: true,
    },
  },
];

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public form = new FormGroup({});
  ngOnInit(): void {
    for (const textbox of textBoxes) {
      const control = new FormControl(textbox.placeholder);
      if(textbox.validation.required){
        control.addValidators(Validators.required);
      }
      this.form.addControl(textbox.name, control);
    }
  }
}

Visit Stacblitz for demo

Answer 2

If you're looking to implement validation only when the required property within your validation object is true, follow these steps:

To begin, create a new instance of FormControl, and then utilize the addValidators method for dynamic validation addition:

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

const textBoxes = [
  {
    fontColor: 'red',
    fontSize: '20',
    placeholder: 'name',
    name: 'input name',
    label: 'mohamed',
    validation: {
      required: true,
    },
  },
];

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public form = new FormGroup({});
  ngOnInit(): void {
    for (const textbox of textBoxes) {
      const control = new FormControl(textbox.placeholder);
      if(textbox.validation.required){
        control.addValidators(Validators.required);
      }
      this.form.addControl(textbox.name, control);
    }
  }
}

Visit Stacblitz for demo

Answer 3

Answer №2

// This is a sample component code

  ngOnInit() {

const textBoxes = [
  {
    fontColor: 'red',
    fontSize: '20',
    placeholder: 'name',
    name: 'input name',
    label: 'mohamed',
    validation: [
      required: true,
      min: 5,
    ],
  },
];

    this.initializeForm(textBoxes);
  }    

  initializeForm(controls: YourModel[]) {
    this.formGroup = this.service.createFormGroup(controls);
  }

// It's recommended to use a service for your functionality

  validatorsMap = {
    required: () => Validators.required,
    min: (num: number) => Validators.min(num),
    ... etc: etc(),
    ... etc: etc(),
  };


  createFormGroup(inputs: YourModel[]): FormGroup {

      const group: any = {};

      inputs.forEach(input => {

          const validations: any[] = this.getValidators(input);

          group[input.name] = new FormControl(
            '', // initial value
            validations// custom validations here
          );
        });

      return new FormGroup(group);

  }

  getValidators(input: ControlModel) {

    return input.validation
      .map(validation => {
        return fn = this.validatorsMap[validation.name];
      });
  }

Answer 4

// This is a sample component code

  ngOnInit() {

const textBoxes = [
  {
    fontColor: 'red',
    fontSize: '20',
    placeholder: 'name',
    name: 'input name',
    label: 'mohamed',
    validation: [
      required: true,
      min: 5,
    ],
  },
];

    this.initializeForm(textBoxes);
  }    

  initializeForm(controls: YourModel[]) {
    this.formGroup = this.service.createFormGroup(controls);
  }

// It's recommended to use a service for your functionality

  validatorsMap = {
    required: () => Validators.required,
    min: (num: number) => Validators.min(num),
    ... etc: etc(),
    ... etc: etc(),
  };


  createFormGroup(inputs: YourModel[]): FormGroup {

      const group: any = {};

      inputs.forEach(input => {

          const validations: any[] = this.getValidators(input);

          group[input.name] = new FormControl(
            '', // initial value
            validations// custom validations here
          );
        });

      return new FormGroup(group);

  }

  getValidators(input: ControlModel) {

    return input.validation
      .map(validation => {
        return fn = this.validatorsMap[validation.name];
      });
  }

Steps for creating a dynamic validation using a new form control

Answer №1

Answer №2

Similar questions

How can I extract the text enclosed in <li> tags using JavaScript?

Sorting through items within a container object

Leveraging image values for selecting an image from a collection and showcasing it (Javascript)

Building a MEAN stack application using Angular 5 and implementing passportJS for authentication

Issue with submitting input fields that were dynamically added using jquery

Authenticate users by accessing their login information stored in a MongoDB database using Node.js and Express

The element is implicitly imparted with an 'any' type due to the incapability of utilizing an expression of type 'number' to index the type '{}'. This error occurs in the context of VUEJS

Angular request: HTTP request<any> is not generic

Separate the date format string into tokens

Tips for effectively utilizing 'ngModel' alongside a form control name

Setting up Mongoose with Admin JS in NestJS: A Step-By-Step Guide

Avoiding hydration errors when using localStorage with Next.js

Comparison of Static Site Generation (SSG) with Server-Side Rendering and Client-Side Rendering

Errors detected while attempting to install dependencies using pnpm: modules unspecified

Uncovering data from a dynamic website through the combination of Selenium and PhantomJS

When trying to access the same path, useEffect does not trigger

What steps can I take to ensure that the upper and left sections of a modal dialog remain accessible even when the size is reduced to the point of overflow?

Displaying a default input placeholder in Kendo UI Datepicker for Angular 2

What causes the 'find' query to return a Query object instead of the expected data in MongoDB?

Enhancing JavaScript Objects with New Key/Value Pairs