我的銷售點應用程式有問題，當我用鍵盤填充輸入時，它接受 maxLenght，但是當我用每個按鈕所具有的值填充它時它不尊重。有誰知道這件事？
<div mat-dialog-content>
<mat-form-field appearance="fill">
<mat-label>Password</mat-label>
<input matInput #input [(ngModel)]="data.password" maxlength="4" type="password">
</mat-form-field>
<div >
<div >
<button (click)="addNumber(1)">1</button>
<button (click)="addNumber(2)">2</button>
<button (click)="addNumber(3)">3</button>
</div>
<div >
<button (click)="addNumber(4)">4</button>
<button (click)="addNumber(5)">5</button>
<button (click)="addNumber(6)">6</button>
</div>
<div >
<button (click)="addNumber(7)">7</button>
<button (click)="addNumber(8)">8</button>
<button (click)="addNumber(9)">9</button>
</div>
<div >
<button id="noBorder" (click)="reset()">Clear</button>
<button id="noBorder" (click)="addNumber(0)">0</button>
<button id="noBorder" (click)="delete()">Del</button>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">Back</button>
<button id="ok" mat-button [mat-dialog-close]="data.password" cdkFocusInitial>Ok</button>
}
uj5u.com熱心網友回復：
maxLength 屬性不能以編程方式作業。這意味著它僅在用戶輸入某些內容時才有效，而不是在 JS 強制輸入時才有效，就像您對所有按鈕所做的那樣。特別是因為data.password = "x"do 與輸入無關（您僅將值與 ngModel 系結）
有兩種修復方法
第一：簡單的
假設您的 add number 函式將一個數字添加到密碼中，您檢查長度是否低于最大值，如果是則添加
public maxLength: number = 4;
addNumber(nbr: number) {
if (data.password.length < maxLength) {
data.password = `${nbr}`
}
}
二：對的
您在這里嘗試實作的目標稱為程式化表單驗證。Angular 有一種非常特殊的方式來實作它。請參閱有關反應式表單的檔案。您將密碼系結到表單或控制元件，并放置檢查長度的驗證器，即使 TS 中的值發生變化。
在組件 TS 中：
passwordControl = new FormControl("", Validators.maxLength(this.maxLength))
addNumber(nbr: number) {
this.passwordControl.setValue(this.this.passwordControl.value `${nbr}`)
}
在 html 中
<mat-form-field appearance="fill">
<mat-label>Password</mat-label>
<input matInput #input [formControl]="passwordControl" type="password">
<mat-error *ngIf="passwordControl.invalid">Password not matching format</mat-error>
</mat-form-field>
您可以輕松檢查密碼是否匹配格式并使用以下方式提交表單this.passwordControl.invalid
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/450131.html
標籤：有角度的