How to prevent deletion of first characters in input?

Question

typescript

Tried this code but it doesn't work.

<input
      v-model="loginForm.props.phone"
      @blur="loginForm.controls.phone.markAsDirty()"
      id="phone"
      name="phone"
      type="text"
      placeholder="+7"
    />
    <div class="error-label" v-if="loginForm.controls.phone.dirty">{{loginForm.controls.phone.errorMessage}}</div>
    <Button :disabled="!loginForm.valid" :btnText="btnText" @submit="submit"/>

import { LoginForm } from "@/form/login/loginForm";
import { IFormGroup, RxFormBuilder } from "@rxweb/reactive-forms";
import { Component, Model, Vue, Watch } from "vue-property-decorator";
import Button from "./Button.vue";

@Component({
    components: {
        Button
    },
     
})
export default class Form extends Vue {
  loginForm!: IFormGroup<LoginForm>;
  formBuilder: RxFormBuilder = new RxFormBuilder();
  btnText = 'Продолжить';
  
  constructor() {
      super();
      this.loginForm = this.formBuilder.formGroup(LoginForm) as IFormGroup<LoginForm>;
  }
  submit() {
      alert("OK");
  }

}

export class LoginForm implements ILoginForm {

    private _phone = '+7';

    get phone(): string{
        return this._phone;
    }

    @required()
    @minLength({value: 12})
    @maxLength({value: 12})
    set phone(value: string){
        if(value[0] != '+' && value[1] != '7') {
            value = '+7';
            this._phone = value;
        } else {
            this._phone = value;
        }
    }

}

Answer 1

You are suffering from garbage :)
If you definitely need a country code: take it out of the input, and arrange the latter so that the user understands. Here are examples: https://getbootstrap.com/docs/4.0/components/input...
Let the user enter the number without the country code, and you will add this code yourself before sending it to the right place.