Generating form groups programmaticallyORDynamically

I recently utilized angular-archwizard to implement a wizard step with *ngFor

However, I encountered an issue on how to create a dynamic formGroup for each step. In the code below, I managed to create a single formGroup for all steps, but my goal is to have a unique dynamic formGroup for each step.

<aw-wizard #wizard>

   <aw-wizard-step *ngFor="let category of categories">
      <ng-template awWizardStepTitle>
         <span class="custom-title">{{category.categoryLabel}}</span>
      </ng-template>

      <sof-form [border]="false" [formGroup]="parametersForm">
      <sof-sub-form column="2">
         <ng-container *ngFor="let parameter of category.parameters | sortBy: 'order'" [ngSwitch]="parameter.type">
         <sof-form-label>{{parameter.parameterLabel}}
            <span *ngIf="parameter.control  | includes: 'required'" style="color: red">*</span>
         </sof-form-label>
         <sof-form-item style="padding-top: 6px" id="parameters">
            <sof-input [type]="'text'" formControlName="{{parameter.parameterId}}" *ngSwitchCase="'text'"></sof-input>
            <sof-input [type]="'number'" formControlName="{{parameter.parameterId}}" *ngSwitchCase="'number'"></sof-input>
            <sof-monoselect formControlName="{{parameter.parameterId}}" [mode]="'autoComplete'" [options]="parameter.valuesList" bindLabel="label"
            bindValue="value" (onSearch)="onSearchParameter($event, parameter)" *ngSwitchCase="'monoselect'"></sof-monoselect>
            <label class="switch switch-small" *ngSwitchCase="'toggle'">
            <input type="checkbox" name="{{parameter.parameterId}}" formControlName="{{parameter.parameterId}}" (change)="checkboxAction(parameter.parameterId)">
            <span class="slider round"></span>
            </label>
         </sof-form-item>
         </ng-container>
      </sof-sub-form>
      </sof-form>

   </aw-wizard-step>

</aw-wizard>
angulartypescript

Answer №1

<ng-container *ngFor="let param of category.parameters | sortBy: 'order';  let index = idx" [ngSwitch]="param.type">
<sof-form-field [formControlName]="'control' + index">{{param.label}}

let idx = 0;
for (const element of Array) {
  this.form.addControl('control' + this.idx,
    new FormControl(null, [Validators.required]));
idx ++;}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using TypeScript, extract the value of a Promise from a Page Object

Struggling to retrieve a value from a WebDriver promise in a Protractor solution using TypeScript, the response keeps coming back as undefined. get nameInput(): string { var value: string; this.nameElement.getAttribute('value').then(v =& ...

angularjsseleniumtypescriptwebdriverprotractor

Access a PDF document in a new tab and save it with a specific file name using Angular

I am facing a challenge in Angular where I want to open a PDF file in a new tab and enable the user to download it with a specific name (Example.pdf). The current code successfully downloads the PDF but does not open a new tab (target=_blank is ineffecti ...

angular

The vertical scrolling functionality of the MUI DataGrid in Safari may occasionally fail to work

Utilizing the <Box> component from MUI core and the <DataGrid> component from MUIX, along with some other components, I have created a data grid that has the following appearance: https://i.sstatic.net/Gc8sP.png When the number of rows exceed ...

csstypescriptscrollmaterial-uioverflow

Can you explain the distinction between Observable<ObservedValueOf<Type>> versus Observable<Type> in TypeScript?

While working on an Angular 2+ project in Typescript, I've noticed that my IDE is warning me about the return type of a function being either Observable<ObservedValueOf<Type>> or Observable<Type>. I tried looking up information abou ...

angulartypescriptrxjsobservable

Creating a dynamic return statement in typescript: A step-by-step guide

I am looking to dynamically set a return value to a variable based on values retrieved from an API. The current function in question uses static values: this.markDisabled = (date: NgbDate) => { return (this.calendar.getWeekday(date) !== 5 && ...

angulartypescript

Angular 10 encountering an issue with subject instantiation

I am encountering an issue with my Angular application. Everything runs smoothly with `ng serve`, and the application builds correctly using `ng build --prod`. However, when I attempt to run the generated sources in the browser, an error occurs: TypeError: ...

angulartypescriptrxjsangular10

If the input is unmounted in react-hook-form, the values from the first form may disappear

My form is divided into two parts: the first part collects firstName, lastName, and profilePhoto, while the second part collects email, password, confirmPassword, etc. However, when the user fills out the first part of the form and clicks "next", the val ...

javascriptreactjstypescriptreact-hook-form

Component re-rendering and initializing useReducer

I made some revisions to this post. Initially, I shared the entire problem with my architecture and later updated it to focus directly on the issue at hand in order to make it easier for the community to provide assistance. You can now jump straight to the ...

javascriptreactjstypescriptuse-reducer

Obtain a controller's reference from a callback by utilizing TypeScript

Implementing a simple controller that utilizes a directive/component and passes a function as binding. However, when the function is called, there is no reference available to access any of the controller class services. Within the "public onTileClicked" ...

javascriptangularjsangularjs-directivetypescriptangularjs-components

Using a custom TypeScript wrapper for Next.js GetServerSideProps

I developed a wrapper for the SSR function GetServerSideProps to minimize redundancy. However, I am facing challenges in correctly typing it with TypeScript. Here is the wrapper: type WithSessionType = <T extends {}>( callback: GetServerSideProps&l ...

javascriptreactjstypescripttypesnext.js

Understanding Multiple Type Scenarios in React with Typescript

Code Demonstration: type PropsType = {top: number} | {bottom: number} // The function that moves something in one direction by a specific distance. function move(props: PropsType) { ... } Expected Usage: move({top: 100}) or move({bottom: 100}) Avoid us ...

javascriptreactjstypescriptfrontend

What is the best way to transpile TypeScript within the Astro framework?

Recently, I decided to dive into exploring Astro for a couple of upcoming projects. In my research, I delved into the script and typescript sections of the documentation (), as well as (). However, I found the workflow somewhat counterintuitive and struggl ...

typescriptastrojs

The error message "element is not defined" is indicating an issue related to the cordova-plugin-google

In my current project using Ionic 3, I decided to implement map-related features by incorporating the Google Maps plugin recommended by the Ionic Team. This specific plugin serves as a wrapper around cordova-plugin-googlemaps. Following the steps outlined ...

javascriptangularionic-frameworkgoogle-maps-api-3cordova-plugins

Tips on navigating an array to conceal specific items

In my HTML form, there is a functionality where users can click on a plus sign to reveal a list of items, and clicking on a minus sign will hide those items. The code structure is as follows: <div repeat.for="categoryGrouping of categoryDepartm ...

javascripttypescript

Displaying sorted objects from Angular serviceIn Angular 8, let's retrieve an object

In my Angular8 application, I am running a query that fetches a data object. My goal is to sort this data object based on the order value and then display each product item on the browser. For example, here is an example of how the output should look like ...

javascriptangulartypescriptdictionaryobservable

Setting up NextJs in Visual Studio Code with Yarn

When I used yarn create next-app --typescript to set up a TypeScript Next.js application with Yarn, everything seemed to be working fine with the command yarn run dev. However, Visual Studio Code was not recognizing any of the yarn packages that were added ...

typescriptvisual-studio-codenext.jsyarnpkg

Changing the Class of an Element in a Different Component with Angular 2+

Currently in a project utilizing Angular 4, I have implemented two components: app.component and other.component Within app.component.html, there exists a div with the name attribute myClass. <div class="myClass"></div> In the other.componen ...

javascriptangulartypescript

Tips for validating nominal-typed identifiers

I recently started experimenting with the enum-based nominal typing technique explained in more detail at this link. enum PersonIdBrand {} export type PersonId = PersonIdBrand & string interface Person { id: PersonId firstName: string lastName: ...

typescriptenums

What is the best way to insert an HTML attribute into a dynamically generated build script within Angular?

After running the ng build --prod command, Angular creates 4 scripts. One of these is called main.js. I am wondering if there is a way to dynamically add an HTML attribute to this script tag in the index.html file once the build process is complete. I nee ...

javascriptangular

Reacting like sticky bottoms and tops

I'm working on a react/tailwind project that involves a component I want to be fixed at both the top and bottom of the screen. In simpler terms, there's an element that I need to always stay visible even when the user scrolls up or down the page ...

htmlcssreactjstypescripttailwind-css