限制 Angular 中的 Sweet Alert 輸入字符長度

Question

要求：用戶不能在輸入框中輸入超過 20 個字符。

我已經實現了 Sweet alert 來在我的 Angular 項目中顯示消息。

一旦我們單擊一個按鈕，將顯示一個帶有輸入類型密碼（彈出）的甜蜜警報

我需要將密碼輸入限制為最大長度 20

這應該發生在用戶鍵入超過 20 個字符然后限制它之后才鍵入。

Swal.fire({
    title: "Delete My Account",
    text: "Please enter your password to delete your account",
    input: 'password',
    allowOutsideClick: true,   
    showCloseButton: true,   
    inputAutoTrim:true,
    inputValidator: (value) => {
      if ((value).length > 20) {
        return 'You cannot enter more than 20 characters';
                }          
      else if (!value) {
        return 'Please enter the password';
      }
    }
  }).then((result) => {
      if (result.value) {
          // console.log("Result: " + result.value);
          let password:any = result.value; 
          console.log(" (password).length : " + (password).length );
          if ((password).length > 20) {
            Swal.fire(  'Reached Max',  'You cannot enter more than 20 characters',  'error')
            return false;
        }

          this.userPassword = result.value;
          this.deleteMyAccount();            
      }
      else if (result.isConfirmed) 
      {
        Swal.fire(  'Password required',  'please enter the password',  'error')
      }
  }); 

上面的代碼允許在輸入中添加 N 個字符，然后拋出錯誤消息。

TIA

Answer 1

您應該使用 maxlength="20" 和 onKeyPress="if(this.value.length==20) return false;" 在輸入標簽中。

input type="text" class="inputcustom" placeholder="輸入銀行賬號" formControlName="accountNumber" maxlength="18" onKeyPress="if(this.value.length==18) return false;">