Creating an interface that is heavily dependent on another interface, while only considering the input type for a generic class

Question

Creating an interface that is heavily dependent on another interface, while only considering the input type for a generic class

I am currently working on an Angular reactive form and have defined an interface as follows:

export interface LoginForm {
    username: FormControl<string>,
    password: FormConrtol<string>
}

My goal now is to create another interface that represents the value of the form:

export interface LoginFormValue {
    username: string,
    password: string
}

As my forms contain numerous attributes, I am looking for an automated way to generate the type for the form value. Is there a way to achieve this automatically?

angular typescript angular-reactive-forms

Answer 1

Answer №1

This content is repetitive.

When working with Angular 14, it is sufficient to maintain the value interface for your form without the need for a separate type.

Access the Stackblitz example here

import { Component, VERSION } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  form = this.fb.group({
    username: ['', [Validators.required]],
    password: ['', [Validators.required]],
  });

  constructor(private fb: FormBuilder) {
    // Take a look at the "value" variable's type
    const value = this.form.value;
  }
}

Answer 2

This content is repetitive.

When working with Angular 14, it is sufficient to maintain the value interface for your form without the need for a separate type.

Access the Stackblitz example here

import { Component, VERSION } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  form = this.fb.group({
    username: ['', [Validators.required]],
    password: ['', [Validators.required]],
  });

  constructor(private fb: FormBuilder) {
    // Take a look at the "value" variable's type
    const value = this.form.value;
  }
}

Creating an interface that is heavily dependent on another interface, while only considering the input type for a generic class

Answer №1

Similar questions

Unit testing Angular components involves testing a service creation through an interface

Angular integration with Keycloak

MUI options - The specified type 'string' cannot be matched with type '"icon" | "iconOnly" | "text" | "outlined" | "contained" | undefined'

Is it possible to access the service and 'self' directly from the HTML template?

Steps to convert a value to currency pipe after encountering an error message in Angular 8

Angular - Displaying a notification when the timezone does not align with the current moment in time

Combining attributes of objects in an array

What is the process for importing a function dynamically in a Next.js TypeScript environment?

The default value retrieved from an HTTP API and stored in a BehaviorSubject within a service

A guide to connecting form input values to a reactive form

Using ng-template in ContentChildren causes the component to throw an ExpressionChangedAfterItHasBeenCheckedError

Is there a way to set up the application that consumes an npm module with a private git url to strictly utilize files exclusively from the module's dist folder?

What is the best way to include additional text in a dropdown menu?

I am facing an issue with my interface - the variable designed to store boolean values

Using Angular 6 to load external HTML files with CSS inside a router-outlet

Typescript's spellbinding courses

Incorporating node packages into your typescript projects

encountering a problem with retrieving the result of a DOM display

The pathway specified is untraceable by the gulp system

Utilizing the input element to modify the font color of the title upon clicking the button