style : added proper backspace to input boxes
This commit is contained in:
parent
531a2b8f83
commit
6621298e81
File diff suppressed because one or more lines are too long
@ -26,48 +26,61 @@ export class LoginComponent {
|
||||
});
|
||||
}
|
||||
|
||||
setFocus(field: 'email' | 'password') {
|
||||
setFocus(field: 'email' | 'password'): void {
|
||||
this.focusedField = field;
|
||||
}
|
||||
|
||||
onNumpadClick(value: string) {
|
||||
onNumpadClick(value: string): void {
|
||||
if (!this.focusedField) return;
|
||||
|
||||
const control = this.loginForm.get(this.focusedField);
|
||||
const current = control?.value || '';
|
||||
const newValue = current + value;
|
||||
|
||||
// Set the form control value
|
||||
// Update form control
|
||||
control?.setValue(newValue);
|
||||
|
||||
// Set the input element value directly
|
||||
// Update input element directly
|
||||
const inputRef = this.focusedField === 'email' ? this.emailInputRef : this.passwordInputRef;
|
||||
inputRef.nativeElement.value = newValue;
|
||||
|
||||
// Refocus to fix cursor position
|
||||
setTimeout(() => inputRef.nativeElement.focus(), 0);
|
||||
// Focus and move cursor to the end
|
||||
setTimeout(() => {
|
||||
const el = inputRef.nativeElement;
|
||||
el.focus();
|
||||
el.setSelectionRange(newValue.length, newValue.length);
|
||||
}, 0);
|
||||
|
||||
// Trigger change detection
|
||||
this.cdRef.detectChanges();
|
||||
}
|
||||
|
||||
onBackspace() {
|
||||
onBackspace(): void {
|
||||
if (!this.focusedField) return;
|
||||
|
||||
const control = this.loginForm.get(this.focusedField);
|
||||
const current = control?.value || '';
|
||||
const newValue = current.slice(0, -1);
|
||||
|
||||
// Update form control
|
||||
control?.setValue(newValue);
|
||||
|
||||
// Update input element directly
|
||||
const inputRef = this.focusedField === 'email' ? this.emailInputRef : this.passwordInputRef;
|
||||
inputRef.nativeElement.value = newValue;
|
||||
|
||||
setTimeout(() => inputRef.nativeElement.focus(), 0);
|
||||
// Focus and move cursor to the end
|
||||
setTimeout(() => {
|
||||
const el = inputRef.nativeElement;
|
||||
el.focus();
|
||||
el.setSelectionRange(newValue.length, newValue.length);
|
||||
}, 0);
|
||||
|
||||
// Trigger change detection
|
||||
this.cdRef.detectChanges();
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
onSubmit(): void {
|
||||
console.log(this.loginForm.value);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user