Forms that are typed out, featuring extended common controls

export interface CommonControls {
  chosen: FormControl<boolean>;
}

export interface FormControlsOne extends CommonControls {
  title: FormControl<string>;
  cost: FormControl<string>;
}

export interface FormControlsTwo extends CommonControls {
  arrangement: FormControl<number>;
  genre: FormControl<string>;
  info: FormControl<string>;
}

export type MainFormGroup<T extends CommonControls> = FormGroup<T>;

Why am I having trouble extending specific controls with common controls and using them in a type? There's an issue at FormGroup<T> indicating

Type T does not satisfy the constraint
{ [K in keyof T]: AbstractControl<any, any>; }

I've come across suggestions online where they propose to use:

export interface CommonControls {
  chosen: FormControl<boolean>;
  [key: string]: AbstractControl<any, any>;
}

However, this allows for adding various controls to the FormGroup which defeats the purpose of having a strongly typed form.

Any guidance?

angulartypescriptangular-forms

Answer №1

Wouldn't it make more sense for the property (key) to belong to one of the keys within the CommonControls and have the value be an AbstractControl.

FormControl, FormGroup, and FormArray all derive from AbstractControl, making it the foundational type for form controls.

export interface CommonControls {
  selected: FormControl<boolean>;
}

export interface FirstFormControls extends CommonControls {
  name: FormControl<string>;
  price: FormControl<string>;
}

export interface SecondFormControls extends CommonControls {
  ordering: FormControl<number>;
  type: FormControl<string>;
  description: FormControl<string>;
}

export type BaseFormGroup<T extends CommonControls> = FormGroup<{
  [K in keyof T]: AbstractControl<any, any>;
}>;

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

Accessing Nested Arrays in Angular 8: Retrieving Data in HTML Template from Multiple Layers of Arrays

Hello there. I'm using an API that gives me the following data: (4) [{…}, {…}, {…}, {…}] 0: dueDate: "2018-03-26T00:00:00" priority: {priorityId: 1, priorityName: "Critical", priorityColor: "red"} statuses: Array(1) 0: ...

angulartypescriptangular8

Enable the acceptance of various validator patterns within Angular Material 2

I'm using md-error in angular material to validate user inputs from the client side. Currently, I am trying to validate an input field that accepts two types of patterns: Pattern 1: Accept the first 9 characters as numbers followed by the 10th ch ...

angularjsvalidationtypescriptangular-material

The dynamically loaded JavaScript file was unable to access the constructor, resulting in the error message "X is not a constructor."

Attempting to eliminate the use of import statements and instead dynamically load Javascript files using a specific class. This particular class is used for this purpose: export function JSImport<T>( importPromise: Promise<T>, ): Promise&l ...

javascriptangulartypescriptimportmodule

When utilizing a standard Component in combination with resolveComponentFactory, the outcome will be Component<{}> rather than <T>

I've developed a dialog service that dynamically creates a DialogComponent with a child component. My goal is to make the DialogComponent a generic class of <T> so that I can type it for any child component I use. Currently, I am creating my Di ...

angularangular-componentsangular-dynamic-components

Exploring Angular: The Dynamic Declaration of object.property in ngModel

<input [(ngModel)]="Emp."+"dt.Rows[0]["columnname"]"> This scenario results in an undefined value In my current project, I am leveraging the power of a MVC CustomHtmlHelper to generate textboxes dynamically based on database schema. The textbox ...

asp.net-mvcangulartypescriptasp.net-mvc-4angular4-forms

Karma is reporting an error with TypeScript, saying it cannot locate the variable 'exports'

Currently, I am in the process of mastering how to write Unit Test cases for an angular project coded in Typescript. To facilitate this, I have opted for utilizing Karma and Mocha. Below lays out the structure of the application: Project/ ├── app/ ...

javascriptunit-testingtypescriptmocha.jskarma-mocha

Using Ionic to send HTTP requests with authentication headers

I'm encountering an issue with Ionic where it insists on sending a pre-fetch request to the server without a JWT token, causing the app to crash. Additionally, I need a way to capture non-200 responses from the server as it frequently returns errors l ...

angularjstypescriptionic2

The issue with the `this` keyword in a jquery event handler when using Typescript

Here is my TypeScript code snippet. class something { createSomething(): JQuery { let result = $('<div>'); $('<input>').on('change paste keyup', () => { this.myProperty = $(this) ...

javascriptjquerytypescript

Guide on how to utilize jest for mocking MongoDB manager in typescript

Is there a way to return a mongodb.connection.db() type value and mock its collection for testing purposes? I have implemented a mongoClient connection and use its db() function. If everything is set up correctly, I should be able to access the collections ...

typescriptunit-testingjestjsmockingts-jest

One method for identifying which observable has been altered in Observable.merge is by examining the output of

Here is a simplified and clear version of my code: connect(): Observable<Customer[]> { const displayDataChanges = [ this._customerDatabase.dataChange, this._filterChange, this._sort.mdSortChange, this._paginator.page ]; ...

javascriptangulartypescriptrxjsreactive-programming

An error was encountered while attempting to establish a ngmodule service creation

I'm currently working on setting up a servicesModule to house all of my services. The first service I'm attempting to transfer is my remote service, but I'm encountering an error that I can't seem to troubleshoot. Uncaught Error: Unexp ...

angular

Tips for conducting tests on ngrx/effects using Jasmine and Karma with Angular 5 and ngrx 5

Here is the file that I need to test. My current focus is on some effects service while working with Angular5 (^5.2.0) and ngrx5 (^5.2.0). I have been struggling to properly implement the code below for testing purposes. Any tips or suggestions would be ...

angularunit-testingtypescriptngrxngrx-effects

Create an object with identical keys as another object

I need to create a mapping between two objects. The first object can have keys of any string type and values of a generic type. I want to map the second object with the same keys, allowing different types for the values (ideally extracted from the generi ...

typescripttypescript-typings

Ways to specify the data type of a function's input parameter

I'm new to TypeScript and have a function that accepts another function as a parameter, which in turn takes a number as input. loadResources(updateProgress: Function) { let progress = 100; updateProgress(progress); } When calling this function: l ...

typescriptinputtypesparametersparameter-passing

Is there a way to trigger the opening of the mat-autocomplete panel when an option is selected in a different mat-autocomplete component?

Is it possible to trigger the opening of a mat-autocomplete panel when an option is selected in another mat-autocomplete? To see an example, please check out this demo. ...

angularangular-materialangular-material-6mat-autocomplete

Exploring the latest upgrades in React 18 with a focus on TypeScript integration

I am currently working on a complex TypeScript project with React and recently made the decision to upgrade to the new version of React 18. After running the following commands: npm install react@18 npm install react-dom@18 npm install @types/react-dom@18 ...

javascriptnode.jsreactjstypescriptnpm

Setting up CI/CD for a project involving an API, Angular application, and database on Azure App Services

In my VSTS local GIT REPO, I have a solution file with three main projects: an API, an Angular App, and a SQL Server DB Project. There are also some test projects included in the solution. I am currently facing challenges in setting up CI/CD for this setu ...

angularazureasp.net-web-api

Using Lerna with Docker for Next.js and GraphQL applications

Currently, I am working with lerna and everything runs smoothly locally. However, when I attempt to build the image and operate it through Docker, it does not function as expected. FROM node:16-alpine3.11 ENV NODE_ENV=production COPY . /app WORKDIR /app R ...

node.jstypescriptdockernpmnext.js

Find out if the visible area contains an open dropdown menu and take action if it is not

I am currently working on a way to determine if an open dropdown menu is within the user's view or has moved out of sight. I've been experimenting with the getBoundingClientRect() method to compare coordinates and viewport dimensions, but it seem ...

javascripthtmlcssangular

What is the method for running a powershell script within protractor testing?

I am attempting to run a powershell script within my protractor test. Protractor spec.ts it("Executing Powershell Script", async () => { browser.get('http://mywebsite.com') var spawn = require('child_process').spawn; ...

javascriptnode.jstypescriptprotractor