如何在構建期間防止 Angular 應用程序中的禁用和啟用按鈕

Question

我有一個 angular 應用程序，可以在生產期間啟用和禁用按鈕 如何防止從瀏覽器工具獲取任何輸入

Answer 1

不可能以某種方式禁用該按鈕，即無法從瀏覽器的開發人員工具中對其進行修改。 我的意思是，如果有<button disabled>Click me</button>代碼片段，則可以刪除disabled屬性並單擊按鈕。

您所能做的就是驗證后端的所有請求。 如果按鈕被禁用並且后端接收到應該來自啟用按鈕的請求，則后端應該以400 Bad Request響應。

請注意，在客戶端，JavaScript 代碼也可以被篡改。

Answer 2

在前端，您可以在按鈕的單擊事件function中添加與禁用按鈕相同的邏輯。 因此，即使 html 的某些更新仍處於單擊事件中，它也會使條件失敗。

但是后端必須對所有錯誤情況進行驗證。

<button [disabled]="condition > 2" (click)='submit()' > 2">Submit</button>

在 ts。

submit(){
 if(this.condition < 2){
 // then add logic 
}
}

Answer 3

您可以通過 < input [disabled]="yourBoolean"... 禁用每個輸入

更好的：

您可以通過mat-dialog （選項：{disableClose:true, closeOnNavigation:false}）顯示帶有消息文本的對話框，以防止更改輸入字段。

當您決定用戶可以再次使用該應用程序時，您可以以編程方式關閉對話框。