angular 2 validation on dynamic generated fields in loop

Question

I have a list of input fields that are generated with a model. I am trying to add validation to them. The requirement is they should not be empty or less than 2 characters. problem is in the documentation only shows validation with non-dynamically generated variable Name. My fields are all generated dynamically. So there is no tempVariableName I can hardcode (otherwise they conflict), so I created temp variable from the name of the property I binded the field to. So I came up with something like this :

    <div *ngFor="let field of connector.configFields">
    <label>{{field.name}}</label>
    <input [(ngModel)]="field.value" [type]="field.name === 'Password' ? 'password' : 'text'"
           placeholder="{{field.name}} (required)"
           ngControl="[fieldName+field.name]"
           required minlength="2"
           #fieldName+[field.name]="ngModel" />
    <div *ngIf="(fieldName+[field.name]).errors && ((fieldName+[field.name]).dirty || (fieldName+[field.name]).touched)">
        <span *ngIf="(fieldName+[field.name]).errors.required">Enter Name</span>
        <span *ngIf="(fieldName+[field.name]).errors.minlength">Name minimum at 2 characters</span>
    </div>
</div>

and the configFields in typescript look like this :

export class FieldModel {
public name: string;
public type: string;
public value: any;

}

But this simply would not work. I am new to angular 2 so I am not exactly sure what I did wrong.

See this documentation: angular.io/docs/ts/latest/cookbook/dynamic-form.html — Explosion Pills
– Explosion Pills, Commented Mar 29, 2017 at 17:27

AVJT82 · Accepted Answer · 2017-03-29 18:12:33Z

13

You can use the unique index for each field in the array. Use this together with the name attribute (and ngModel) which will evaluate each form controls separately. So each input field gets the unique name, eg:

name="f{{i}}"

where we get {{i}} from the iteration:

<div *ngFor="let field of connector.configFields; let i = index">

So finally, your template could look like this:

<form #myForm="ngForm">
  <div *ngFor="let field of connector.configFields; let i = index">
    <input name="f{{i}}" [(ngModel)]="field.value" [type]="field.name === 'Password' ? 'password' : 'text'" required #f="ngModel" minlength="2"/>
    <div *ngIf="f.errors && (f.dirty || f.touched)">
      <div *ngIf="f.errors.required"> This field is required </div>
      <div *ngIf="f.errors.minlength"> Min 2 chars </div>
    </div>
  </div>
</form>

Here's a live

Demo

edited Mar 29, 2017 at 18:12

answered Mar 29, 2017 at 17:58

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

nanobots Over a year ago

This is interesting. This means that angular can bind value to frontend temp variables as well as the backend code.

AVJT82 Over a year ago

Not really sure what you mean? With backend code, do you refer to a model/values received from backend that can be set e.g as default values, or what do you mean? :)

AVJT82 Over a year ago

BTW, I changed one-way binding to two-way binding of your fields, since I saw you have used it in your question, so in case you need/want it...

AVJT82 Over a year ago

Glad to hear! :) Have a great day/evening/morning depending on your timezone :P and happy coding!

sda87 Over a year ago

nice simple explanation. Got a proper answer from here.. Thanks a lot

grinat · Accepted Answer · 2017-03-29 17:39:27Z

0

Prepare data in model and return to angular. Angular and hard logic in the template = bad friends.

answered Mar 29, 2017 at 17:39

grinat

954 bronze badges

Comments

Narayanan · Accepted Answer · 2018-07-11 13:12:59Z

0

But if you have a select option and if has *ngFor for option then error message loses its mapping, due second *ngFor loop

better to define custom class for error message and use css display: none or **block*

.custom-valid-box{
  display: none;
 }

.form-control-danger + .custom-valid-box{
   display: block;
 }

answered Jul 11, 2018 at 13:12

Narayanan

1

Collectives™ on Stack Overflow

angular 2 validation on dynamic generated fields in loop

3 Answers 3

Demo

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related