Dealing with Undefined Issue in Angular Subscription Validation

Question

Dealing with Undefined Issue in Angular Subscription Validation

Let me start by acknowledging that while there are numerous questions on this topic, none of them addressed the specific issue I encountered. Despite trying various approaches with maps and other methods, I am still unsure about the correct way to proceed.

My primary goal is to utilize this opportunity to edit the userProfile. The input fields should be preloaded with the existing values from the profile, ensuring that no validation errors occur.

Within the constructor() of my profile.component.ts, I invoke the following method:

readProfileData() {
 this.userService.getProfile()
   .pipe(first())
   .subscribe(
     userData => {
       this.firstname = userData.firstName;
       this.lastname = userData.lastName;
       this.username = userData.username;
       this.email = userData.email;
       this.dateOfBirth = userData.dateOfBirth;
       this.country = userData.location;
       this.profileImage = userData.profileImage;
       this.gender = userData.gender;
       this.lastUpdated = userData.lastUpdated;
       this.activated = userData.activated;
       this.userId = userData.userId;
       this.userService.profileImageUpdate$.next(this.profileImage);
     });
}

The getProfile() method is then invoked:

getProfile() {
    return this.http.get<any>(this.GET_PROFILE_API);
}

In my ngOnInit() method, I initiate the form building process:

public buildForm() {
 this.editForm = this.form.group({
   username: [this.username, [Validators.required, Validators.minLength(this.minLength), CustomValidators.validateCharacters], AlreadyTakenValidator.checkUsername(this.registrationService)],
   email: [this.email, [Validators.required, Validators.email, CustomValidators.validateCharacters], AlreadyTakenValidator.checkEmail(this.registrationService)],
   oldPassword: ['', [Validators.required]],
   newPassword: ['', [Validators.required]],
   newPasswordConf: ['', [Validators.required]],
   firstname: [this.firstname, [Validators.required, NoWhitespaceValidator()]],
   lastname: [this.lastname, [Validators.required, NoWhitespaceValidator()]],
   country: ['', [Validators.required]],
   dateOfBirth: ['', [Validators.required]],
   gender: ['', [Validators.required]],
 }
 , {
     validator: MustMatch('newPassword', 'newPasswordConf')
   })
}

The challenge at hand is that the input fields remain empty as the values are undefined. Manually entering values before applying the validators works, indicating a problem with the subscription. I need the variables to be populated in order for the fields to display the data.

I have explored solutions involving mapping to res.json or using toPromise, but nothing has proven effective so far. While I understand the asynchronous nature of the issue, I am uncertain how to address it without leaving the user stuck in a loading loop.

angular typescript subscribe

Answer 1

Answer №1

Let's entrust the task of creating the form to the service.

The service will:

Retrieve the data from the API.
Generate the form structure.
Fill the form with the fetched data.
Provide the completed form.

The component will simply utilize the form. To achieve this, follow the implementation steps for the service below:

import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { FormBuilder, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class UserService {

  GET_PROFILE_API = 'https://jsonplaceholder.typicode.com/users/1';

  constructor(
    private readonly http: HttpClient,
    private readonly fb: FormBuilder
  ) { }

  getUserForm() {
    return this.fetchProfileData()
      .pipe(
        map(userProfile => this.generateUserForm(userProfile))
      );
  }

  private generateUserForm(user) {
    return this.fb.group({
      name: [user.name, Validators.required],
      username: [user.username, Validators.required],
      email: [user.email, Validators.required],
      phone: [user.phone, Validators.required],
      website: [user.website, Validators.required],
    });
  }

  private fetchProfileData() {
    return this.http.get<any>(this.GET_PROFILE_API);
  }

}

Your Component structure will be as follows:

Template:

<form 
  *ngIf="form$ | async as form" 
  [formGroup]="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Name</label>
    <input type="text" formControlName="name" class="form-control" placeholder="Enter Name">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Username</label>
    <input type="text" formControlName="username" class="form-control" placeholder="Enter Username">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="text" formControlName="email" class="form-control" placeholder="Enter Email">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Phone</label>
    <input type="text" formControlName="phone" class="form-control" placeholder="Enter Phone">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Website</label>
    <input type="text" formControlName="website" class="form-control" placeholder="Enter Website">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Component Class:

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { UserService } from './user.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  form$: Observable<FormGroup>;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.form$ = this.userService.getUserForm();
  }

}

For reference, here's a Functional Sample on StackBlitz.

Answer 2

Let's entrust the task of creating the form to the service.

The service will:

Retrieve the data from the API.
Generate the form structure.
Fill the form with the fetched data.
Provide the completed form.

The component will simply utilize the form. To achieve this, follow the implementation steps for the service below:

import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { FormBuilder, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class UserService {

  GET_PROFILE_API = 'https://jsonplaceholder.typicode.com/users/1';

  constructor(
    private readonly http: HttpClient,
    private readonly fb: FormBuilder
  ) { }

  getUserForm() {
    return this.fetchProfileData()
      .pipe(
        map(userProfile => this.generateUserForm(userProfile))
      );
  }

  private generateUserForm(user) {
    return this.fb.group({
      name: [user.name, Validators.required],
      username: [user.username, Validators.required],
      email: [user.email, Validators.required],
      phone: [user.phone, Validators.required],
      website: [user.website, Validators.required],
    });
  }

  private fetchProfileData() {
    return this.http.get<any>(this.GET_PROFILE_API);
  }

}

Your Component structure will be as follows:

Template:

<form 
  *ngIf="form$ | async as form" 
  [formGroup]="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Name</label>
    <input type="text" formControlName="name" class="form-control" placeholder="Enter Name">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Username</label>
    <input type="text" formControlName="username" class="form-control" placeholder="Enter Username">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="text" formControlName="email" class="form-control" placeholder="Enter Email">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Phone</label>
    <input type="text" formControlName="phone" class="form-control" placeholder="Enter Phone">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Website</label>
    <input type="text" formControlName="website" class="form-control" placeholder="Enter Website">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Component Class:

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { UserService } from './user.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  form$: Observable<FormGroup>;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.form$ = this.userService.getUserForm();
  }

}

For reference, here's a Functional Sample on StackBlitz.

Answer 3

Answer №2

Your situation is occurring because of the asynchronous nature of http.get. This means that by the time you receive values in your subscriber response, it has already called "buildForm()".

To resolve this issue, you can consider one of the following solutions:

a) Call "buildForm()" inside the subscription.

b) Use async-await in the method definition of "readProfileData()", include await at the function call of readProfileData(), and then call "buildForm()".

c) Convert these processes into promises and only resolve them when you have received your response.

For further information, you can refer to:

in-depth guide on async-await

handling promises

Answer 4

Your situation is occurring because of the asynchronous nature of http.get. This means that by the time you receive values in your subscriber response, it has already called "buildForm()".

To resolve this issue, you can consider one of the following solutions:

a) Call "buildForm()" inside the subscription.

b) Use async-await in the method definition of "readProfileData()", include await at the function call of readProfileData(), and then call "buildForm()".

c) Convert these processes into promises and only resolve them when you have received your response.

For further information, you can refer to:

in-depth guide on async-await

handling promises

Dealing with Undefined Issue in Angular Subscription Validation

Answer №1

Answer №2

Similar questions

Testing components in Angular using Renderer2

Using AngularFire and Firebase to convert observable arrays

What are the steps to resolve TypeScript errors in OpenLayers version 6.6.1?

Is it feasible to restrict generic classes for particular functions?

Error: Attempting to access a property called 'sign' on an undefined value

I am interested in incorporating a personalized class into the Kendo UI for Angular TabStrip

The specified type '{ file: ArrayBuffer; url: string; }' cannot be assigned to type '{ file: Blob; url: string; }'

significant issue arising from slow input box typing in angular 5 causing concern

A new feature reminiscent of grace has been introduced in the most recent release of ChartJs 2.9.3

The benefits of utilizing switchMap for fetching route parameters in Angular 2

What are the steps to passing props to a dynamically imported React component?

Changing the button color dynamically in Angular Material

The NativeScript WebSocket Module cannot be located: Issue: Unable to resolve 'nativescript-websockets'

Error in Typescript: The property 'a' is not defined in the type 'A'

The browser is unable to load the Angular app's component

Error: Failed to fetch the data from the Firebase database

Issue encountered with ASP.Net Core on AWS Serverless: The middleware for the SPA default page was unable to locate and return the default page '/index.html'

The best approach for sending parameters to the parent class in TypeScript for optimal efficiency

Using Angular service worker to pre-fetch video files

Error in Angular 2: The requested URL https://imgur-apiv3.p.mashape.com/ cannot be loaded. The use of a wildcard '*' is not allowed in the 'Access-Control-Allow-Origin' header