Button disable atribute can`t be changed when aplication is loaded in Angular project

Question

im making some register pages in a Ionic-Angular project, and i use some buttons to go to the next requisites to register. For example: first I ask for email, and until email format isnt't correct, my button to go to next page is disabled. When correct I enable it and go to a page where your name is asked. Here when the user enters his name, my code sets disabled atribute of the button to false, but the button stays as it was. As if i cant access the disable attribute. But when i reload the page in my browser, that same button does what i say in the code (disable = false).

This is very strange for me, how can the same code I used in the page before for the button disable work, but in the next page when I navigate by url to that next page not work. But that button on the page does work when reloaded in browser.

I´ve been thinking it could be something of angular lifecycle of the view|page|component.

I leave my code here, but i really think its just fine, and its doms or angulars fault.

HTML:

<div class="content" id="body">
  <p class="titulo">Mi nombre es</p>

  <ion-input
    id="ionInput"
    class="input"
    inputmode="text"
    maxlength="25"
    minlength="2"
    mode="ios"
    pattern="text"
    required="true"
    type="text"
    (ionChange)="inputValueChange($event)"
  ></ion-input>


  <ion-button
  disabled
  id="continueButton"
  (click)="navigateForward()"
  expand="block"
  fill="solid"
  shape="round"
  class="buttonContinue"
  >Continuar</ion-button
>
</div>

Dont really take in count the CSS classes i remove or add. It has nothing to do with the problem.

.ts FILE:

export class Step2NamePage implements OnInit {
  name = '';
  continueButton: HTMLButtonElement;
  constructor(private router: Router) {}

  ngOnInit() {

  }

  inputValueChange(ev) {
    const input = document.getElementById('ionInput');
    const continueButton = document.getElementById('continueButton') as HTMLButtonElement
      this.name = ev.detail.value;
    // console.log(this.name);

    if (this.name.length > 2) {
      if (input.classList.contains('input')) {
        (document.getElementById('continueButton') as HTMLButtonElement).disabled  = false;
        console.log('lo desbloque');
        console.log(input, this.continueButton);
        input.classList.remove('input');
        input.classList.add('inputFull');
      }
    } else {

      if (input.classList.contains('inputFull')) {
        input.classList.remove('inputFull');
        input.classList.add('input');
        (document.getElementById('continueButton') as HTMLButtonElement).disabled  = true;
        console.log(input, this.continueButton);
      }
    }
  }

  navigateForward() {
    this.router.navigate(['/register/step3-birthday']);
  }
}

Answer 1

Angular keeps track of the DOM in it's own special way, and provides ample ways for you to access element properties, values etc. You shouldn't hardly ever be trying to find elements with document.getElementById and the like...

Use ngModel (import the forms module - see this post) to track and utilize form input values

Use ngClass to have the DOM update classes for elements on the fly - see this post

export class Step2NamePage implements OnInit {
  name = '';
  continueButton: HTMLButtonElement;
  constructor(private router: Router) {}
  ngOnInit() {}
  navigateForward() {
    this.router.navigate(['/register/step3-birthday']);
  }
}


<div class="content" id="body">
  <p class="titulo">Mi nombre es</p>

  <ion-input
    id="ionInput"
    *ngClass="{'inputFull':name.length>2, 'input': name.length<=2}"
    [(ngModel)]="name"
    inputmode="text"
    maxlength="25"
    minlength="2"
    mode="ios"
    pattern="text"
    required="true"
    type="text"
  ></ion-input>


  <ion-button
  [disabled]="name.length<=2"
  id="continueButton"
  (click)="navigateForward()"
  expand="block"
  fill="solid"
  shape="round"
  class="buttonContinue"
  >Continuar</ion-button>
</div>