How to dynamically create inputs and avoid using a form builder array to create each control

Question

I am using Ionic 3.9 and Angular 5 to create a grading system that will allow people to search a list and use a star system to select a grade (1-5). However there are over 100 different types of things they can grade for and they will never grade all of them.

Usually I just use form builder to create a group of inputs but this time I have over 100 which would just take too long to hardcode and it would make it difficult in the future to add/remove certain items. How can I avoid this?

I need to submit the values to the database with the key being short and the value being grade like

{
    RP: 5, 
    FP: 5, 
    .....
 }

Sample array

this.grades = [
    {id: 0, name: 'Parallel Park', short: 'PP', grade: -1},
    {id: 1, name: 'Reverse Park', short: 'RP', grade: -1},
    {id: 2, name: 'Forward Park', short: 'FP', grade: -1},
];

html

<form name="gradeForm">
  <ion-list>
    <ion-item *ngFor="let grade of grades">
      <h4>{{grade.name}} <a class="float-right" (click)="grade.grade = -1">Reset</a>
      </h4>
      <span>
        <ng-container *ngIf="grade.grade >= 0; else gradeZero">{{grade.short}}-{{grade.grade}}</ng-container>
        <ng-template #gradeZero>{{grade.short}}-0</ng-template>
        <rating
          class="float-right rating"
          [(ngModel)]="grade.grade"
          readOnly="false"
          max="5"
          emptyStarIconName="star-outline"
          starIconName="star"
          nullable="false"
          (ngModelChange)="onRatingChange($event)">
        </rating>
      </span>
    </ion-item>
  </ion-list>
</form>

Did you see the official documentation about Dynamic Form ? angular.io/guide/dynamic-form — ibenjelloun
– ibenjelloun, Commented Mar 14, 2018 at 15:37

Julius Dzidzevičius · Accepted Answer · 2018-03-14 16:01:22Z

1

Here is an example:

form: FormGroup;

grades = [
  {id: 0, name: 'Parallel Park', short: 'PP', grade: -1},
  {id: 1, name: 'Reverse Park', short: 'RP', grade: -1},
  {id: 2, name: 'Forward Park', short: 'FP', grade: -1},
];

ngOnInit(){
  this.toFormGroup();
}

toFormGroup() {
let group: any = {};

this.grades.forEach(grade => {
  group[grade.short] = new FormControl(grade.grade, Validators.required);
});
  this.form = new FormGroup(group);
}

html:

<form (ngSubmit)="onSubmit(form.value)" [formGroup]="form">  
  <div *ngFor="let grade of grades" class="form-row">
    <input type="number" [formControlName]="grade.short"/>
  </div>
  <button type="submit">Submit</button>
</form>

DEMO

answered Mar 14, 2018 at 16:01

Julius Dzidzevičius

11k11 gold badges41 silver badges84 bronze badges

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

Collectives™ on Stack Overflow

How to dynamically create inputs and avoid using a form builder array to create each control

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related