Creating dynamic and responsive forms in Angular 8: Step-by-step guide

Question

Creating dynamic and responsive forms in Angular 8: Step-by-step guide

Recently, I posted a question regarding the dynamic generation of form controllers. However, I encountered some challenges with generating templates and controllers dynamically.

In this particular project, my main focus lies on handling four types of questions stored in an array. It is crucial to dynamically generate these questions based on their respective types:

Multiple Choice Questions (MCQ) - Only one selection allowed
Multiple Select Questions - Users can choose multiple answers with at least one required
Ranking Questions - Users need to specify the correct order of answers, ensuring uniqueness
Descriptive Questions - Allows users to provide their own answers

Below is the snippet of my HTML code:

<div class="container">
    <div class="row">
        ...
    </div>
</div>

Additionally, here is my TypeScript code:

surveyQuestionForm: FormGroup;
  formSubmitted = false;

  constructor(private fb: FormBuilder) { }
  questions: any = [
    ...
  ];

  ngOnInit() {
    this.createForms();
  }

  createForms(): any {
    ...
  }

  private buildSubGroup(question) {
    ...
  }

  atLeastOneRequired() {
    ...
  }

  uniqueNumbersValidator() {
    ...
  }

  onSubmit() {
    this.formSubmitted = true;
    console.log(this.formSubmitted);
  }

I've observed an error message stating "control.registerOnChange is not a function." You can access the StackBlitz link for more details: https://stackblitz.com/edit/angular-nya7l9

Your guidance and assistance in resolving this issue would be highly appreciated. Thank you!

typescript angular8

Answer 1

Answer №1

First, the problem with constructing and associating your radio:

Construct it like so:

  case 1:
  case 4:
    return this.fb.group({ answer: ['', [Validators.required]] });

And associate it like this:

<div class="form-group" formGroupName="{{'q' + question.qNo}}">
      <label class="control-label"> {{question.qNo}})
          {{question.question}}</label>
      <div class="ml-3">
          <table>
              <tr *ngFor="let anwr of question.answers; let a=index">
                  <td>{{a+1}}. {{anwr}} </td>
                  <td>
                      <div class="custom-radio custom-control">
                          <input type="radio" class="custom-control-input"
                              id="q{{question.qNo}}_{{a}}"
                              name="answer" value="{{a+1}}"
                              formControlName="answer"
                              [ngClass]="{'is-invalid':surveyQuestionForm.get('q'+ question.qNo).errors && formSubmitted}" />
                          <label class="custom-control-label"
                              for="q{{question.qNo}}_{{a}}"></label>
                      </div>
                  </td>
              </tr>
              <div class="text-danger"
                  *ngIf="surveyQuestionForm.get('q'+ question.qNo).hasError('required') && formSubmitted">
                  Answer required</div>
          </table>

      </div>
  </div>

Utilize the formGroupName directive at the top then directly access the static answer control.

Next, onto your checkbox association:

<div class="form-group" formGroupName="{{'q' + question.qNo}}">
    <label class="control-label"> {{question.qNo}})
        {{question.question}}</label>
    <div class="ml-3">
        <table>
            <tr *ngFor="let anwr of question.answers; let b=index">
                <td>{{b+1}}. {{anwr}} </td>
                <td>
                    <div class="custom-checkbox custom-control">
                        <input type="checkbox" class="custom-control-input"
                            id="q{{question.qNo}}_{{b}}" value="{{b+1}}"
                            formControlName="{{anwr}}"
                            [ngClass]="{'is-invalid':surveyQuestionForm.get('q'+ question.qNo).errors && formSubmitted}" />
                        <label class="custom-control-label"
                            for="q{{question.qNo}}_{{b}}"></label>
                    </div>
                </td>
            </tr>
            <div class="text-danger"
                *ngIf="surveyQuestionForm.get('q'+ question.qNo).hasError('atLeastOneRequired') && formSubmitted">
                At least One Answer required</div>
        </table>

    </div>
</div>

Again, employ the formGroupName directive since your entire form consists of groups, and within them, your formControlNames represent the answers themselves.

Now onto your multiple-choice associations, facing similar issues:

<div class="form-group" formGroupName="{{'q' + question.qNo}}">

and

<input type="number" style="width:40px;"
    id="q{{question.qNo}}_{{a}}"
    [ngClass]="{'is-invalid': surveyQuestionForm.get('q'+ question.qNo).errors 
    && surveyQuestionForm.get('q'+ question.qNo).touched}"
    formControlName="{{anwr}}"
    class="text-center" />

Lastly, addressing your free text response, encountering familiar issues requiring the formGroupName directive and accurate binding to the static answer control within it:

<td><textarea class="form-control" rows="5" id="comment" name="text"
    [ngClass]="{'is-invalid':surveyQuestionForm.get('q'+ question.qNo).errors && 
    surveyQuestionForm.get('q'+ question.qNo).touched}"
    formControlName="answer"></textarea></td>

Fixed solution:

https://stackblitz.com/edit/angular-d4p6ly?file=src/app/app.component.html

Answer 2

First, the problem with constructing and associating your radio:

Construct it like so:

  case 1:
  case 4:
    return this.fb.group({ answer: ['', [Validators.required]] });

And associate it like this:

<div class="form-group" formGroupName="{{'q' + question.qNo}}">
      <label class="control-label"> {{question.qNo}})
          {{question.question}}</label>
      <div class="ml-3">
          <table>
              <tr *ngFor="let anwr of question.answers; let a=index">
                  <td>{{a+1}}. {{anwr}} </td>
                  <td>
                      <div class="custom-radio custom-control">
                          <input type="radio" class="custom-control-input"
                              id="q{{question.qNo}}_{{a}}"
                              name="answer" value="{{a+1}}"
                              formControlName="answer"
                              [ngClass]="{'is-invalid':surveyQuestionForm.get('q'+ question.qNo).errors && formSubmitted}" />
                          <label class="custom-control-label"
                              for="q{{question.qNo}}_{{a}}"></label>
                      </div>
                  </td>
              </tr>
              <div class="text-danger"
                  *ngIf="surveyQuestionForm.get('q'+ question.qNo).hasError('required') && formSubmitted">
                  Answer required</div>
          </table>

      </div>
  </div>

Utilize the formGroupName directive at the top then directly access the static answer control.

Next, onto your checkbox association:

<div class="form-group" formGroupName="{{'q' + question.qNo}}">
    <label class="control-label"> {{question.qNo}})
        {{question.question}}</label>
    <div class="ml-3">
        <table>
            <tr *ngFor="let anwr of question.answers; let b=index">
                <td>{{b+1}}. {{anwr}} </td>
                <td>
                    <div class="custom-checkbox custom-control">
                        <input type="checkbox" class="custom-control-input"
                            id="q{{question.qNo}}_{{b}}" value="{{b+1}}"
                            formControlName="{{anwr}}"
                            [ngClass]="{'is-invalid':surveyQuestionForm.get('q'+ question.qNo).errors && formSubmitted}" />
                        <label class="custom-control-label"
                            for="q{{question.qNo}}_{{b}}"></label>
                    </div>
                </td>
            </tr>
            <div class="text-danger"
                *ngIf="surveyQuestionForm.get('q'+ question.qNo).hasError('atLeastOneRequired') && formSubmitted">
                At least One Answer required</div>
        </table>

    </div>
</div>

Again, employ the formGroupName directive since your entire form consists of groups, and within them, your formControlNames represent the answers themselves.

Now onto your multiple-choice associations, facing similar issues:

<div class="form-group" formGroupName="{{'q' + question.qNo}}">

and

<input type="number" style="width:40px;"
    id="q{{question.qNo}}_{{a}}"
    [ngClass]="{'is-invalid': surveyQuestionForm.get('q'+ question.qNo).errors 
    && surveyQuestionForm.get('q'+ question.qNo).touched}"
    formControlName="{{anwr}}"
    class="text-center" />

Lastly, addressing your free text response, encountering familiar issues requiring the formGroupName directive and accurate binding to the static answer control within it:

<td><textarea class="form-control" rows="5" id="comment" name="text"
    [ngClass]="{'is-invalid':surveyQuestionForm.get('q'+ question.qNo).errors && 
    surveyQuestionForm.get('q'+ question.qNo).touched}"
    formControlName="answer"></textarea></td>

Fixed solution:

https://stackblitz.com/edit/angular-d4p6ly?file=src/app/app.component.html

Answer 3

Answer №2

When working with nested formgroups, make sure to include formgroupname in the template for clarity. It's important to note if this arrangement was intentional or not, as it can affect functionality. I have made some adjustments on your stackblitz.

Check out the updated version here

Answer 4

When working with nested formgroups, make sure to include formgroupname in the template for clarity. It's important to note if this arrangement was intentional or not, as it can affect functionality. I have made some adjustments on your stackblitz.

Check out the updated version here

Creating dynamic and responsive forms in Angular 8: Step-by-step guide

Answer №1

Answer №2

Similar questions

Typescript encounters issues when assigning declaration as TRUE

Leveraging TypeScript alongside body-parser to access properties within req.body

What is the correct way to type "this" to ensure it works properly when called in a subclass method?

When the boolean is initially set to false, it will return true in an if statement without using

Service call delay not displayed on screen

Creating TypeScript declarations for standard JavaScript functions and objects so they can be accessed in a TypeScript project

The type 'IConnectionState' cannot be assigned to the type '{ connected: false; type: "none"; }'

Create a placeholder for an item without the need for a specific function

What is the TypeScript definition for the return type of a Reselect function in Redux?

The issue arises when trying to access the 'addCase' property on the type 'WritableDraft<search>' within the builder argument of extra reducers

Sorting the material table based on the column IDs, which usually correspond to the column names, may not align with the properties of the data

When attempting to specify the path in the angular.json file, Angular encounters difficulty accessing Bootstrap from the node_modules directory

Incorporating Bootstrap Modal into a TypeScript-based minimalist web application

Converting JSON into an interface in TypeScript and verifying its validity

Combining elements from a single array list and transferring them to another array list using Angular 4

Struggling with loading an image in Angular 6 with cornerstonejs

Strategies for handling a collection of objects with immutability

Utilizing TypeScript to define the parameter of a method within a generic interface by extracting a value from the generic type

The ultimate guide to loading multiple YAML files simultaneously in JavaScript

Toggle visibility of content with the click of a button