Results are only displayed upon submitting for the second time

Question

Results are only displayed upon submitting for the second time

Struggling with implementing a change password feature in Angular 7,

On the backend side, if the current password is incorrect, it will return true.

An error message should appear on the Angular side, but I'm encountering an issue where I have to click the submit button twice to show the error message. Even though I can see the response in logs printing true value, the *ngIf directive is not working as expected.

Template:

    <span *ngIf="hasError">
         Wrong current password value  
    </span>

Component:

hasError: boolean;

 submit () {
     this.apiService
    .changePassword(this.formGroup.value).subscribe(res => {
  console.log(res);
  this.hasError = res;    });

Service:

  changePassword(body: any){
     return this.http.post<any>(this.url + 'changePassword', body);
  }

Could someone provide insight into why I need to click the submit button twice to display the HTML element?

Thank you

angular typescript rxjs angular-services angular-changedetection

Answer 1

Answer №1

It seems like you have set

changeDetection: ChangeDetectionStrategy.OnPush

in the component decorator. As a result, Angular will not detect changes until the next change detection cycle, which may only happen after the second click.

To resolve this issue, you can inject ChangeDetectorRef in the constructor and trigger the change detection manually. Here's an example:

  constructor(private cdr: ChangeDetectorRef) {}
  
  hasError: boolean;

  submit () {
     this.apiService
    .changePassword(this.formGroup.value)
    .subscribe(res => {
       console.log(res);
       this.hasError = res;    
       this.cdr.markForCheck();  // <<<---- detect changes
  });

Alternatively, you can also solve this problem by using observables and the Angular async pipe.

  hasError$: new Subject();

  submit () {
    this.apiService
    .changePassword(this.formGroup.value)
    .subscribe(res => this.hasError$.next(res));

In your template, you can use:

  <span *ngIf="hasError$ | async">
       wrong current password value  
  </span>

Answer 2

It seems like you have set

changeDetection: ChangeDetectionStrategy.OnPush

in the component decorator. As a result, Angular will not detect changes until the next change detection cycle, which may only happen after the second click.

To resolve this issue, you can inject ChangeDetectorRef in the constructor and trigger the change detection manually. Here's an example:

  constructor(private cdr: ChangeDetectorRef) {}
  
  hasError: boolean;

  submit () {
     this.apiService
    .changePassword(this.formGroup.value)
    .subscribe(res => {
       console.log(res);
       this.hasError = res;    
       this.cdr.markForCheck();  // <<<---- detect changes
  });

Alternatively, you can also solve this problem by using observables and the Angular async pipe.

  hasError$: new Subject();

  submit () {
    this.apiService
    .changePassword(this.formGroup.value)
    .subscribe(res => this.hasError$.next(res));

In your template, you can use:

  <span *ngIf="hasError$ | async">
       wrong current password value  
  </span>

Answer 3

Answer №2

This is the root cause of the problem

hasError: boolean;

You have declared the variable but failed to assign a value at the beginning. Consequently, when the component loads, the value of hasError defaults to undefined/null. This leads to the template being rendered with that default value.

Solution:

Option 1) (less recommended)

// If you prefer not initializing the value in the component.ts file, make this modification in 
  the HTML file:

<span *ngIf="!!hasError">
         Display error message here
</span>

The use of '!!' checks for the null status of the variable.

Option 2) Recommended

// Initialize the variable to false,

// In the component.ts file

hasError: boolean = false; // CRUCIAL

By setting the initial value to false, your code can remain unchanged. When the service is subscribed, the value can be set to true or false without affecting the HTML structure.

Answer 4

This is the root cause of the problem

hasError: boolean;

You have declared the variable but failed to assign a value at the beginning. Consequently, when the component loads, the value of hasError defaults to undefined/null. This leads to the template being rendered with that default value.

Solution:

Option 1) (less recommended)

// If you prefer not initializing the value in the component.ts file, make this modification in 
  the HTML file:

<span *ngIf="!!hasError">
         Display error message here
</span>

The use of '!!' checks for the null status of the variable.

Option 2) Recommended

// Initialize the variable to false,

// In the component.ts file

hasError: boolean = false; // CRUCIAL

By setting the initial value to false, your code can remain unchanged. When the service is subscribed, the value can be set to true or false without affecting the HTML structure.

Results are only displayed upon submitting for the second time

Answer №1

Answer №2

Similar questions

problems encountered when testing azure containerclient.listblobsbyhierarchy using sinon

What steps should I take to fix the Typescript error showing up in my Next.js route?

Error in Angular-CLI and TypeORM: Module parsing failed due to the presence of 'import' and 'export' statements, which are only allowed with 'sourceType: module'

Angular: Converting JSON responses from HttpClient requests into class instances

Can you explain how to specify individual keys in an object literal in TypeScript?

The default selected item in Material Select does not function properly on the second attempt

The Vue store array declaration triggers a TS error stating that it is not assignable to a parameter of type never

Having trouble with sending values to Angular 7 components' HTML pages

What is the best way to determine which option is most suitable: types, classes, or function types in TypeScript for

What is the significance of the IRenderFunction interface definition in FluentUI?

Implementing a click event to convert text to input in Angular 5

Whenever I attempt to launch my cross-platform application on an android device, an error occurs

Developing a Customized Filtering Mechanism in Angular 8

What is the best way to upgrade the "import {Http, Response} from @angular/http" module for Angular 6?

Specialized Character Formats in TypeScript

What is the process for creating a new element and utilizing its reference to add child elements in React?

The endpoint for sending a contact message at http://localhost:4200/contact/send is not found, resulting in

When the frontend-maven-plugin executes the npm run build command, it encounters difficulty locating the package.json file

Sharing API Results with All Components in Angular 7 using BehaviorSubject

The latest version of IntelliJ Idea Ultimate, 2023.2.5, does not offer compatibility with the updated control flow features in Angular