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

Wondering how to optimize FullCalendar for mobile and touch events?

Upgrading Angular causes issues with fileReplacements not functioning properly for assets

Image paths becoming unresponsive following package upgrades

ExpressJS and cookies - Struggling to initialize a cookie with express-cookie

The browser is preventing a cross origin request in Fetch

Position div elements randomly on the webpage when it first loads

trim() function acting strangely

What could be causing the jQuery news ticker to malfunction on my site?

Place the text within the contenteditable body of a frame at the specific caret position

Guide to utilizing exact matching functionality in ExpressJs router

Improving mongo information using angularjs

Encountering an error when setting up a React-TypeScript ContextAPI

Options for Angular's routerLinkActiveDirective

Utilizing a library that solely enhances the functionality of the Array object

What is the process for storing form data into a text file?

Tips for animating a nested array using jQuery

Error encountered during Heroku deployment: "sh: 1: tailwind: not found"

Utilizing JavaScript to trigger an alert message upon selecting various options and blocking the onclick event

What is the method for closing an <iframe> element directly?

Node js server for world's warm greetings