在Angular專案中加載應用程式時，無法更改按鈕禁用屬性

我在 Ionic-Angular 專案中制作了一些注冊頁面，我使用一些按鈕轉到下一個注冊條件。例如：首先我要求提供電子郵件，直到電子郵件格式不正確，我的轉到下一頁的按鈕被禁用。正確時，我啟用它并轉到詢問您姓名的頁面。在這里，當用戶輸入他的名字時，我的代碼將按鈕的禁用屬性設定為 false，但按鈕保持原樣。好像我無法訪問禁用屬性。但是當我在瀏覽器中重新加載頁面時，同一個按鈕會執行我在代碼中所說的操作（禁用 = false）。

這對我來說很奇怪，我之前在頁面中用于按鈕禁用的相同代碼如何作業，但是在我通過 url 導航到下一頁時在下一頁中不起作用。但是在瀏覽器中重新加載時，頁面上的那個按鈕確實有效。

我一直認為這可能是視圖|頁面|組件的角度生命周期。

我把我的代碼留在這里，但我真的認為它很好，它的 doms 或 angulars 錯誤。

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']);
  }
}

uj5u.com熱心網友回復：

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>

標籤：javascript html 有角度的 打字稿 离子框架

上一篇：如何在JSONAPI回應中獲取物件的物件？

下一篇：Ionic構建在“無法決議com.google.android.gms:play-services-ads-identifier:[15.0.0,16.0.99]”時失敗