在 Angular 项目中加载应用程序时无法更改按钮禁用属性

Question

我正在 Ionic-Angular 项目中制作一些注册页面，我使用一些按钮转到下一个必要条件进行注册。例如：首先我要求提供电子邮件，直到电子邮件格式不正确，我转到下一页的按钮才被禁用。当正确时，我启用它并转到询问您姓名的页面。在这里，当用户输入他的名字时，我的代码将按钮的禁用属性设置为 false，但按钮保持原样。好像我无法访问禁用属性。但是当我在浏览器中重新加载页面时，同一个按钮会执行我在代码中所说的操作 (disable = false)。

这对我来说很奇怪，我在之前的页面中使用的相同代码如何禁用按钮工作，但是当我通过 url 导航到下一页时在下一页中不起作用。但是在浏览器中重新加载时，页面上的那个按钮确实有效。

我一直认为它可能是视图|页面|组件的 angular 生命周期。

我把我的代码留在这里，但我真的认为它很好，它的 dom 或 angular 有问题。

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>

真的不要考虑我删除或添加的 CSS 类。与问题无关。

.ts 文件：

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 以自己的特殊方式跟踪 DOM，并提供您可以通过多种方式访问元素属性、值等。您几乎不应该尝试用 document.getElementById 之类的...

使用 ngModel（导入表单模块 - ）跟踪和利用表单输入值

使用 ngClass 对动态元素进行 DOM 更新类 -

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>

在 Angular 项目中加载应用程序时无法更改按钮禁用属性

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

html

javascript

typescript

ionic-framework

angular