Answer the question
In order to leave comments, you need to log in
How to prevent deletion of first characters in input?
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 the question
In order to leave comments, you need to log in
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.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question