我想呼叫一個函式而不是單擊按鈕，當用戶將從 Angular 的反應形式的輸入框中鍵入最多 6 位數字時。我怎樣才能做到這一點？
在 HTML 中：-
<form style="margin-left: 17px;" [formGroup]="otpForm" (ngSubmit)="submitOtp()">
<mat-form-field appearance="outline">
<input matInput placeholder="6 digit OTP" formControlName="otp" numbersOnly
maxLength="6" minLength="6" required autocomplete="off">
</mat-form-field>
</form>
TS檔案
submitOtp(){ // call verify OTP API}
uj5u.com熱心網友回復：
您需要添加(input) event的input標簽，因為這將跟蹤該輸入場的每一個字符。
例如
otpForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.otpForm = this.formBuilder.group({
otp: new FormControl('', Validators.required),
});
}
inputHandle(event) {
var number = event.target.value;
if (number.length >= 6) {
this.submitOtp();
}
}
submitOtp() {
console.log('call OTP API');
}<form [formGroup]="otpForm" (ngSubmit)="submitOtp()">
<input matInput placeholder="6 digit OTP" formControlName="otp" class="form-control" numbersOnly
maxLength="6" minLength="6" required autocomplete="off" (input)="inputHandle($event)">
</form>在這里你可以玩或檢查
uj5u.com熱心網友回復：
請嘗試這樣，在輸入事件中添加 myFunction 呼叫
<form style="margin-left: 17px;" [formGroup]="otpForm" (ngSubmit)="submitOtp()">
<mat-form-field appearance="outline">
<input matInput placeholder="6 digit OTP" formControlName="otp" numbersOnly
maxLength="6" minLength="6" required autocomplete="off" (input)="myFunction()">
</mat-form-field>
在 .ts 檔案中
myFunction = () => {
if(this.otpForm.controls.otp.value.length === 6) {
// your logic operation
}
}
</form>
uj5u.com熱心網友回復：
otpForm.controls['otp'].statusChanges.subscribe(status => {
if (status === 'VALID') {
// call function here
}
});
您需要確保驗證器位于反應式表單上，而不僅僅是 html：
otp = new FormControl(
null,
[Validators.required, Validators.minLength(6), Validators.maxLength(6)]
)
uj5u.com熱心網友回復：
像這樣的事情會起作用：
this.otpForm.get('otp').valueChanges.pipe(
takeUntil(this.destroy),
filter(x => x?.length === 6)
).subscribe((value) => submitOtp());
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/362687.html
標籤：有角的
上一篇：如何在fastAPI中為<inputtype="file">定義REST端點（并使其與angular一起使用）？
下一篇：NGRX效果未存盤正確資料