基於在角度4文本框中輸入的值啟用/禁用按鈕-初始負載不起作用

Question

我需要啟用/禁用下面的按鈕，我有下面的代碼。 它只能從第二次開始正常工作。 最初，當我登陸頁面時，應該禁用該按鈕，因為我在輸入框中沒有值。 如果我在文本框中輸入內容並將其刪除，則該按鈕將被禁用。 當我以角度4登陸頁面時，如何禁用第一個按鈕

<input type="email" class="form-control" id="inputValue"  placeholder="johndoe@company.com" formControlName="inputValue">
 <button type="button" id="verifyBtn" [disabled]="inputValue === ''" class="btn btn-primary btn-large" (click)="verify()">Verify</button>

Answer 1

您可以這樣設置輸入：

[disabled]="!inputValue"

由於未在開頭設置inputValue值（未定義），因此當您檢查inputValue === '' ，它將為false

[根據評論更新]
如果使用雙向的[(ngModel)] ，則需要注意從視圖到控制器的數據輸入，以及從控制器到視圖的數據輸出。 很多時候，這是一個糟糕的設計。

因為使用的是fromControlName ，它是fromControlName ，所以應該只使用fromControlName和subscription來處理輸入值。 您可以查看帖子

Answer 2

根據您更新的問題，您想在進入頁面時禁用按鈕控件，為此，您應該如下所示創建表單控件

this.heroForm = this.fb.group({
  inputValue : ['', Validators.required ],
});

如果執行上述操作，則您的控件將在第一次自行進入無效狀態。 在您的按鈕html中，您應該這樣做

<form [formGroup]="heroForm">
    <button
     type="button"
     id="verifyBtn"
     formControlName="inputValue"
     [disabled]="heroForm.get('inputValue').invlaid"
     class="btn btn-primary btn-large"
     (click)="verify()">Verify</button>
  </form>

---

您可以這樣嘗試嗎，因此下面的代碼檢查inputvalue是否存在，如果inputvalue是否存在，請檢查其是否具有值

[disabled]="!inputValue || (inputValue && inputValue.length < 1)"