Пробовал этот код, но он не работает.
<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;
}
}
}
Средний
