Utilize Angular 2 Form Elements Again

Question

Utilize Angular 2 Form Elements Again

I'm currently in the process of working on a project with Angular and I want to make sure that my form components can be used for creating and updating entities seamlessly.

Let's say I have a User entity stored on a remote API, and I have a form on the frontend that allows me to create these users and send the input to the server using POST. Everything works fine so far!

The problem arises when I try to use the same form for updating. I need to populate the form fields with the existing information retrieved from the remote server through a GET request. The challenge lies in the fact that the form component loads before the Observable response containing the User entity is received from the REST request.

So, the question is: How can I pre-fill a form with data from a remote server before the form is fully loaded?

angular forms typescript code-reuse

Answer 1

Answer №1

One simple solution is to utilize the ngIf directive.

@Component({
  selector: 'yyy',
  template: `
<form *ngIf="model">
  ...
</form>

<!-- optional -->
<my-spinner *ngIf="!model"></my-spinner>
`})
export class AnotherComponent {
  constructor(private anotherService:AnotherService) {
    this.anotherService.fetchData.subscribe(response => this.model = response);
  }
}

In this approach, *ngIf will display the form in the DOM once the assignment of data to this.model occurs.

Answer 2

One simple solution is to utilize the ngIf directive.

@Component({
  selector: 'yyy',
  template: `
<form *ngIf="model">
  ...
</form>

<!-- optional -->
<my-spinner *ngIf="!model"></my-spinner>
`})
export class AnotherComponent {
  constructor(private anotherService:AnotherService) {
    this.anotherService.fetchData.subscribe(response => this.model = response);
  }
}

In this approach, *ngIf will display the form in the DOM once the assignment of data to this.model occurs.

Utilize Angular 2 Form Elements Again

Answer №1

Similar questions

Guide to navigating to a specific route based on location in a Node.js Express application

Obtaining additional information for Observable<Object[]>

Having Multiple Login Forms on a Single Page

Using Typescript to implement a conditional return type and ensuring that the value types are consistent together

The variable <variable> is not meeting the 'never' constraint. Error code: ts(2344)

Serving HTML from NodeJS instead of JSON

Is there a way to assign a specific item in *ngFor to a reference variable?

The autocomplete suggestions appear as faded gray text following the cursor in the input field, rather than displaying as a pop-up selection

Is there a way to utilize ng-if within a button to reveal the remaining portion of a form using TypeScript?

Ensuring correct association of values to avoid redundancies

Customizing service providers for each individual test in Angular

Angular 11 Working with template-driven model within a directive

Error: 'next' is not defined in the beforeRouteUpdate method

What steps can be taken to eliminate the 404 error when refreshing an Angular 8 Single Page Application (SPA) without using

typescript code: transforming object values into keys in typescript

Typescript: Implementing the 'types' property in a function returned from React.forwardRef

The compilation of the Angular application is successful, however, errors are arising stating that the property does not exist with the 'ng build --prod' command

The proper approach for managing downloaded d.ts files from DefinitelyTyped after installation through npm

Can we restrict type T to encompass subclasses of K, excluding K itself?

Tips for merging DTO (Data Transfer Object) with non-DTO objects