İnput'a ait birkaç sorum olacak.

Merhaba arkadaşlar. Yazdığım uygulama için özel numpad yazıyorum. İnputa numpad ile veri giriliyor. Burada sıkıntı yok. Ama input"ta bulunan verinin her hangi bir elemanına tıklayıp devam etmek istiyorum ama girilen değeri verinin sonuna ekliyor. Mesela 12345 sayısını giriyoruz. Sonra 12-den sonra yine rakam eklemek istiyoruz. mesela 21. Sonucun 1221345 olması gerekirken 1234521 oluyor. Verinin hangi elemanına tıkladığımı nasıl yakalayabilirim?

Hocam inputunuz nasıl bir input ? HTML mi ? Javascript ile her bir keypress takip ediliyor mu? Biraz daha detay lazım gibi duruyor.

Hocam Angular Cli ile yazdığım proje.

<form formGroup="valForm" #loginForm class="form-validate mb-lg" role="form" name="loginForm" novalidate="" (submit)="submitForm(loginForm.value)">
                    <div class="form-group has-feedback">
                        <input class="form-control" id="InputEmail" (focus)="focusFunction()" (click)="onClick($event, BUTTONS.ID)" type="email" name="email" [value]="firstNumber" placeholder="Emailinizi yazın" autocomplete="off"
                            formControlName="email" required="" />
                        <span class="fa fa-user form-control-feedback text-muted"></span>
                    <!--    <span class="text-danger" *ngIf="valForm.controls['email'].hasError('required') && (valForm.controls['email'].dirty || valForm.controls['email'].touched)">Bu alan gereklidir</span>
                        <span class="text-danger" *ngIf="valForm.controls['email'].hasError('email') && (valForm.controls['email'].dirty || valForm.controls['email'].touched)">Bu alanın geçerli bir e-posta adresi olması gerekir</span>
                   --> </div>
                    <div class="form-group has-feedback">
                        <input class="form-control" id="exampleInputPassword1" (click)="onClick($event, BUTTONS.PASSWORD)" type="password" [value]="secondNumber" name="password" placeholder="Parolanızı yazın" formControlName="password"
                            required="" />
                        <span class="fa fa-lock form-control-feedback text-muted"></span>
                      <!--  <span class="text-danger" *ngIf="valForm.controls['password'].hasError('required') && (valForm.controls['password'].dirty || valForm.controls['password'].touched)">Bu alan gereklidir</span>
                   --> </div>
                    <div class="clearfix">
                    </div>
                    <button class="btn btn-block btn-primary mt-lg" type="submit">Giriş</button>

                    <div class="numpad">
                        <div class="numbergroup">
                            <button class="number" type="button" (click)="onClick($event, BUTTONS.SEVEN)">7</button>
                            <button class="number" type="button" (click)="onClick($event, BUTTONS.EIGHT)">8</button>
                            <button class="number" type="button" (click)="onClick($event, BUTTONS.NINE)">9</button>
                        </div>
                        <div class="numbergroup">
                            <button class="number" type="button" (click)="onClick($event, BUTTONS.FOUR)"> 4 </button>
                            <button class="number" type="button" (click)="onClick($event, BUTTONS.FIVE)">5</button>
                            <button class="number" type="button" (click)="onClick($event, BUTTONS.SIX)">6</button>
                        </div>
                        <div class="numbergroup">
                            <button class="number" type="button" (click)="onClick($event, BUTTONS.ONE)">1</button>
                            <button class="number" type="button" (click)="onClick($event, BUTTONS.TWO)">2</button>
                            <button class="number" type="button" (click)="onClick($event, BUTTONS.THREE)">3</button>
                        </div>
                        <div class="numbergroup">
                            <button class="number" type="button" (click)="onClick($event, BUTTONS.BACKSPACE)"><em class="fa fa-long-arrow-left" aria-hidden="true"></em></button>
                            <button class="number" type="button" (click)="onClick($event, BUTTONS.ZERO)">0</button>
                            <button class="number" type="submit"><em class="fa fa-sign-in"></em></button>
                        </div>
                    </div>
                </form>

Html kodlar bunlar hocam.

Hocam konu benim boyumu aştı. Konuyu yukarı taşımak için son yorumumu atıp buralardan ayrılıyorum

Sonunda çözdüm. Hocam sizi de etiketledim belki bir gün işine yarar.

İnput bu şekilde yazılıyor

<input type="text" #firstInput name="email"(keyup.enter)="onEnter(firstInput.value)" (click)="updateCaretPosition()"
 [(ngModel)]="displayText" placeholder="ID yazın" autocomplete="off" />

İnputta her tıklama olduğunda updateCaretPosition() fonksiyonu çalışıyor. Kursor pozisyonunu belirlemek için.

Component'te çalışacak kodlar.

@ViewChild('firstInput') private firstInput: ElementRef;
displayText: string = '';


ngOnInit() {
        this.caretPosition$.subscribe((caretPosition: number) => {
            this.caretPosition = caretPosition;
            setTimeout(() => {
                SalesConsoleComponent.setSelectionRange(this.displayText, caretPosition, caretPosition);
            }, 0);
        });
    }
private static setSelectionRange(input: any, start: number, end: number): void {
        if (input.setSelectionRange) {
            input.focus();
            input.setSelectionRange(start, end);

        } else if (input.createTextRange) {
            const range = input.createTextRange();

            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    }
    public updateCaretPosition(): void {
        this.setCaretPosition(this.firstInput.nativeElement.selectionStart);

    }
    public caretPosition$: ReplaySubject<number> = new ReplaySubject(1);
    private caretPosition: number;
    public setCaretPosition(position: number) {
        this.caretPosition$.next(position);
    }