How can you store form field validation rules (for example, firstname.dirty) in an array within TypeScript in Angular?

Question

How can you store form field validation rules (for example, firstname.dirty) in an array within TypeScript in Angular?

How do I save form field validation rules in an array? What should replace /'''''HERE'''''/ with?

formfields:  Array<Object> = [
    {label: "Employer:", control: "employer", validations: "{requirederror: "employer.errors?.required && employer.dirty", notvaliderror: "employer.errors?.maxlength && employer.dirty"}"},
    {label: "Phone:",    control: "phone",    validations: "{requirederror: "phone.errors?.required && phone.dirty", notvaliderror: "phone.errors?.pattern && phone.dirty"},
    {label: "Email:",    control: "email",    validations: "{requirederror: "email.errors?.required && email.dirty", notvaliderror: "email.errors?.email && email.dirty"}"}
];

<div *ngFor="let formfield of formfields; let i = index">
     <div class="labelandinput">
          <label class="label">{{formfield.label}}</label>
          <input class="input" formControlName="{{formfield.control}}">
          <div class="formfielderror" *ngIf=" /'''''HERE'''''/ ">...</div>
          <div class="formfielderror" *ngIf=" /'''''HERE'''''/ ">...</div>
     </div>
</div>

Is it simply achieved like this?

  <div class="formfielderror" *ngIf="{{formfield.validations.requirederror}}"> SOME REQUIRED ERROR </div>
  <div class="formfielderror" *ngIf="{{formfield.validations.notvaliderror}}"> SOME NOT VALID ERROR </div>

arrays angular typescript validation

Answer 1

Answer №1

Consider revising how you label your data. Traditionally, an array represents a collection of similar elements, with each element potentially being a JavaScript object that describes a specific item.

Let's say you're working with reactive forms. In this case, your array might resemble something like this:

myItems = [
 formBuilder.group({
   firstName: ['',[Validators.required(), Validators.pattern(/[0-9]+/)]],
   hobby: [''] // no validators here
 })
]

You can then display it using the following markup:

<div *ngFor="let item of myItems" [formGroup]="item">
  <input type="text" formControlName="firstName">
 <div *ngIf="item.firstName.errors?.required">First name is required. Please fill it in.</div>
 <div *ngIf="item.firstName.errors?.pattern">First name should follow the pattern [0-9]+.</div>
  
  <input type="text" formControlName="hobby">
</div>

I hope this example gives you a good starting point.

If you only need one form for each item, then an array may not be necessary. Simply use form = formBuilder.group({...}), and you won't need to iterate with *ngFor in the template.

Answer 2

Consider revising how you label your data. Traditionally, an array represents a collection of similar elements, with each element potentially being a JavaScript object that describes a specific item.

Let's say you're working with reactive forms. In this case, your array might resemble something like this:

myItems = [
 formBuilder.group({
   firstName: ['',[Validators.required(), Validators.pattern(/[0-9]+/)]],
   hobby: [''] // no validators here
 })
]

You can then display it using the following markup:

<div *ngFor="let item of myItems" [formGroup]="item">
  <input type="text" formControlName="firstName">
 <div *ngIf="item.firstName.errors?.required">First name is required. Please fill it in.</div>
 <div *ngIf="item.firstName.errors?.pattern">First name should follow the pattern [0-9]+.</div>
  
  <input type="text" formControlName="hobby">
</div>

I hope this example gives you a good starting point.

If you only need one form for each item, then an array may not be necessary. Simply use form = formBuilder.group({...}), and you won't need to iterate with *ngFor in the template.

How can you store form field validation rules (for example, firstname.dirty) in an array within TypeScript in Angular?

Answer №1

Similar questions

Mastering Angular Apollo Error Resolution Methods

Encountered an issue during the Jest test where the error message states 'Cannot call Class constructor Stack without using the keyword 'new''

How can I convert an ArrayList to a String in Java?

Can you explain why it prints to the console twice every time I try to add an item?

Strategies for Maintaining User Logins

Display two elements from the array on each line, with the elements separated by a comma

Angular2 module encounters failure when trying to inject InjectionToken using @Inject()

Retrieve the object property based on an array of indices

Searching for values in nested arrays using lodash.find

Bring in services from a neighboring module within Angular 2

What steps can I take to ensure that the elements are in the same row instead of being displayed in three separate rows?

Is there a way to use Css Autoprefixer on multiple files at once with a single function

The use of Next.js v12 middleware is incompatible with both node-fetch and axios

Importing a JSON or JSONC file into a vite/typescript project can be easily done

What is the process for navigating from one page to another in Ionic 2?

Issue with page break functionality during print preview

What is the best way to invoke a function from a Service to a Component in Angular?

Encountering Kubernetes Ingress Error: 502 Bad Gateway - Connection Refused

Utilize existing *.resx translation files within a hybrid application combining AngularJS and Angular 5

Different varieties of TypeScript's keyof when working with objects