Having trouble displaying the button upon initial load using ngIf

Question

Having trouble displaying the button upon initial load using ngIf

My goal is to display a button when editing an input form. Initially, the button is hidden when the page loads but it should appear once any of the input fields are edited. I have also implemented highlighting for the input box that is being edited. However, whenever I try to edit my input field, I encounter an error message saying "NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'". Despite this error, the button does not appear. Strangely, clicking on a random location in the browser makes the button visible. Can someone help me identify the issue here?

In my TypeScript file:

button: boolean;

ngOnInit(): void {
    this.button = false;
}

highlight(input: string): string {
    // logic for coloring...
    if (input.dirty) {
        // change color and show button
        this.button= true;
    }
    return color;
}

In my HTML file:


<button *ngIf="button" label='Submit'>

angular typescript primeng

Answer 1

Answer №1

If you're facing an issue, I suggest trying a different approach that is also demonstrated in my own StackBlitz example:

Show a button when at least one form-field has input.
Highlight every input-field with input.

The CSS File

Create custom styling for input-fields with input using CSS. The trick involves creating an empty placeholder for the number field and hiding it to indicate input:

input:not(:placeholder-shown) {
  border: 3px dashed yellow;
}

The TS File

Subscribe to form changes and display the button if at least one field has a value. The incoming `res` object contains all form properties and values:

myform: FormGroup;
showButton = false;

ngOnInit() {
  this.myform = new FormGroup({
    numbers: new FormControl(null),
    otherNumbers: new FormControl(null),
  });

  // Subscribe to form changes and show button if any field is not empty:

  this.myform.valueChanges.subscribe((res) => {
    let showBtn = false;
    for (const property in res) {
      showBtn = !!res[property] ? true : showBtn;
    }
    this.showButton = showBtn;
  });
}

The HTML File

Remember to include a placeholder with an empty space for the styling trick to work:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-2 col-sm-offset-1">
      <form [formGroup]="myform">
        <td>
          <input
            type="number"
            pInputText
            class="form-control"
            formControlName="numbers"
            placeholder=" "
          />
        </td>
        <br />
        <td>
          <input
            type="number"
            pInputText
            class="form-control"
            formControlName="otherNumbers"
            placeholder=" "
          />
        </td>
      </form>
    </div>
    <button *ngIf="showButton" label="Submit">Button</button>
  </div>
</div>

Answer 2

If you're facing an issue, I suggest trying a different approach that is also demonstrated in my own StackBlitz example:

Show a button when at least one form-field has input.
Highlight every input-field with input.

The CSS File

Create custom styling for input-fields with input using CSS. The trick involves creating an empty placeholder for the number field and hiding it to indicate input:

input:not(:placeholder-shown) {
  border: 3px dashed yellow;
}

The TS File

Subscribe to form changes and display the button if at least one field has a value. The incoming `res` object contains all form properties and values:

myform: FormGroup;
showButton = false;

ngOnInit() {
  this.myform = new FormGroup({
    numbers: new FormControl(null),
    otherNumbers: new FormControl(null),
  });

  // Subscribe to form changes and show button if any field is not empty:

  this.myform.valueChanges.subscribe((res) => {
    let showBtn = false;
    for (const property in res) {
      showBtn = !!res[property] ? true : showBtn;
    }
    this.showButton = showBtn;
  });
}

The HTML File

Remember to include a placeholder with an empty space for the styling trick to work:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-2 col-sm-offset-1">
      <form [formGroup]="myform">
        <td>
          <input
            type="number"
            pInputText
            class="form-control"
            formControlName="numbers"
            placeholder=" "
          />
        </td>
        <br />
        <td>
          <input
            type="number"
            pInputText
            class="form-control"
            formControlName="otherNumbers"
            placeholder=" "
          />
        </td>
      </form>
    </div>
    <button *ngIf="showButton" label="Submit">Button</button>
  </div>
</div>

Having trouble displaying the button upon initial load using ngIf

Answer №1

Similar questions

Equalizing Lists in Angular 2

Guide on invoking a private function in Angular2 using RxJS Observables

Encountering a problem with lazy loading of module routing paths. Issue arises when attempting to navigate to http://localhost:4200

Why is passing data:{} to a route essential for achieving the desired outcome?

React component state remains static despite user input

Mapping URLs to objects in JavaScript, TypeScript, and Angular4

Fixing the Unspecified addEventListener ErrorLearn how to resolve this error

What is the best way to assign values to multiple form elements simultaneously?

Angular 2 Mastering the Art of Saving State in Routing with Precision

Image control failing to display SVG file

What is the significance of the any type in Typescript?

Providing properties to the main Vue.js components

Angular 7 - ALERT: Circular dependency identified:

How can I access and modify a sub collection document in Angular Firestore?

How can Enums be utilized as a key type for transmitting properties in Vue?

The attribute 'date' is not found within the class 'EmployeeScheduleExceptionModel', however, it is present in the parent class from which it inherits

What is the best way to verify observables during the ngOnInit phase of the component lifecycle?

Error: The property `orderRow` in `_this.Order` is not defined

How do we set and update object properties in Angular 2, specifically with regards to changing the color?

Pausing or buffering an RxJS 6 observable when the page is inactive