unable to show button on first load with ngIF-CodePudding

I am trying to show a button when I edit a input form. I hide the button when the page loads and it will show when I edit any of the input fields. I have highlighted the input box whenever I edited it. Whenever I edited my input field I would get error "NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'"

the button would still not appear. however when I click on a random location of the browser, my button would appear. may I know what is the issue here ?

button: boolean;

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

highlight(input: string): string{
    //color...
    if (input.dirty) {
      //color
      this.button= true;
    }
    return color;
  }

html


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

CodePudding user response：

I would recommend to tackle your issue with a complete different approach, which is also included in my own stackblitz-example:

you want to show a button whenever at least one form-field has some input
you want to highlight every input-field that has some input

The CSS File

Define a custom styling for input-fields that have an input. Thereby we use a trick with css. We create an empty placeholder for the number-field and whenever the placeholder is hidden, it means that the field has an input :-):

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

The TS File

We subscribe to changes in the form. Whenever a change in the form happens we check whether at least one field contains a value and therefore the button has to be displayed. The incoming res-object actually contains all properties of your form together with their values.

myform: FormGroup;
showButton = false;

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

  // Subscribe to changes in your form and set the button visible,
  // if at least one form-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

Don't forget to add a placeholder with an empty space, otherwise the above mentioned trick with the styling wouldn't work:

<div >
  <div >
    <div >
      <form [formGroup]="myform">
        <td>
          <input
            type="number"
            pInputText
            
            formControlName="numbers"
            placeholder=" "
          />
        </td>
        <br />
        <td>
          <input
            type="number"
            pInputText
            
            formControlName="otherNumbers"
            placeholder=" "
          />
        </td>
      </form>
    </div>
    <button *ngIf="showButton" label="Submit">Button</button>
  </div>
</div>