How to loop the formcontrolname dynamically along with validation

Question

I want to validate the multiple looping of dynamic formControlName="xxx" in select field

My html code

<ul *ngFor="let detaillist of stressli.stresstabdetails;">
    <li>
        <div class="form-container">
            <select [(ngModel)]="detaillist.stressname" class="form-control" formControlName="spotstressname {{q + 1 }}">
                <option [ngValue]="undefined" selected>Select an option</option>
                <option *ngFor="let item of stressdata;" [ngValue]="item">{{item}}</option>
            </select>
        </div>
    </li>
</ul>

TS file validation:

this.CaseDetailsForm = this.formBuilder.group({
  spotstressname1:['', Validators.required],
  spotstressname2:['', Validators.required],
});

In .ts file I hardcoded the spotstressname1, spotstressname2, etc. Instead of hardcoded value I need dynamically as Output. How can I get that?

Check formArray

Eldar
– Eldar

2019-11-18 14:11:49 +00:00
Commented Nov 18, 2019 at 14:11 — Eldar
– Eldar, Commented Nov 18, 2019 at 14:11

AVJT82 · Accepted Answer · 2019-11-19 07:29:09Z

2

First of all... DON'T use ngModel with reactive forms, you need to decide whether you want to use ngModel or reactive forms, not both!

Here in this sample we go full reactive. So how to create your formcontrols dynamically... I would do:

constructor(private fb: FormBuilder) {
  this.CaseDetailsForm = this.fb.group({});
}

ngOnInit() {
  // add dynamic form controls named 'spotstressname' and index
  this.stressli.stresstabdetails.map((x, i) => {
    this.CaseDetailsForm.addControl('spotstressname'+i, this.fb.control(x.stressname))
  })
}

Then in the template we can use the keyvalue pipe to iterate the form controls of the form in the template:

<div *ngFor="let ctrl of CaseDetailsForm.controls | keyvalue">
  <select [formControlName]="ctrl.key">
    <option value="">Select an option</option>
    <option *ngFor="let item of stressdata;" [value]="item">{{item}}</option>
  </select>
</div>

STACKBLITZ DEMO

edited Nov 19, 2019 at 7:29

answered Nov 18, 2019 at 19:00

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

4 Comments

Mohamed Abubakar Over a year ago

Thanks for your reply. Kindly help me with , i want exactly like yours but along with validation of select option values while submitting the form.

AVJT82 Over a year ago

If you want validation after submit, I can suggest following: stackblitz.com/edit/angular-r9tkhb?file=src/app/…

Mohamed Abubakar Over a year ago

thanks for your reply. Your using array data inside the .ts file. But am not able get same output by using same data from JSON file. Am calling JSON data by using services. Its in nested array object

AVJT82 Over a year ago

Please fork my stackblitz and mock the http-request, you can do it by using rxjs of. I'll be happy to take a look at the stackblitz :)

ArpitAJ · Accepted Answer · 2019-11-18 14:26:45Z

1

this.data = [
   {
     controlName: 'Username',
     controlType: 'text',
     valueType: 'text',
     placeholder: 'Enter username',
     validators: {
       required: true,
       minlength: 5
    }
   },  
  {
    controlName: 'Deposit From',
    controlType: 'date',
    valueType: 'date',
    placeholder: 'Deposit From',
    modelVal:"depositFrom",
    validators: {
      required: true
    }
  }];

this.data.forEach(formControl => {
      formGroup[formControl.controlName] = new FormControl('');
    });

answered Nov 18, 2019 at 14:26

ArpitAJ

871 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to loop the formcontrolname dynamically along with validation

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related