Dynami c minlength и maxlength in Vue - PullRequest
Новая
       36

Dynami c minlength и maxlength in Vue

0 голосов
/ 24 января 2020

Существует поле префикса для телефона и поле для самого телефона. Проверка должна быть динамической c. Минимальная длина рассчитывается по формуле 7-phoneprefix.length, максимальная длина равна 15 - phoneprefix.length. Не получается делать это динамически, а когда я меняю phonePrefix. Я старался не возвращать объект, и метод все равно не помогает. Буду очень признателен, если кто-нибудь мне поможет. Вот мой код: 

    <template v-if="currentStep === 'phone'">
        <div class="q8-form-row-text">
            <span class="second" v-t="{path:'requirement_phone'}"></span>
        </div>
        <div class="q8-form-row q8-form-row_phone-group">

            <CustomSelectComponent
                    v-if="country"
                    @country="onPhonePrefixChange"
                    :options="countries"

                    v-model="country"
                    class="phonePrefix"
            ></CustomSelectComponent>

            <input v-model="phone" class="q8-form__input q8-form__input-phone" :placeholder="$t('phone')"
                   name="phone" required="required" pattern="[0-9٠-٩]+" :minlength="getPhoneLengthValidation('min')" type="tel"
                   :maxlength="getPhoneLengthValidation('max')" ref="phone"  @blur="$v.phone.$touch()"/>
            <span v-if="$v.phone.$error" class="q8-form__input-error" v-t="{path: 'error.phoneNumberError'}"/>

        </div>
        <div class="q8-form-row">
            <button type="submit" value="submit" class="q8-form__submit q8-form__submit__yellow q8-form__submit__yellow-gradient"
                    :class="{
                    'q8-form__submit_next': submitButtonType === 'next'
                }"
                    v-t="{path: submitButtonType}" @click="handleSubmitButtonClick()" :disabled="isSubmitButtonDisabled()"></button>
        </div>

    </template>

Logi c: 

  public getPhoneLengthValidation(validationOption: 'min' | 'max'): number {
        const size = validationOption === 'max' ? 15 : 7;

        return size - this.phonePrefix.length;
    }

Vue проверки: 

validations: {

    fullName: {
        required,
        minLength: minLength(2),
    },
    email: {
        required,
        email,
        minLength: minLength(this.minValue),
    },
    phone: {
        required,
        numeric,
    },
    PrivacyPolicy: {
        checked: ( (value) => value === true),
    },
},

1 Ответ

0 голосов
/ 24 января 2020

Пожалуйста, проверьте мой пример для такой реализации. Основная проблема была в кастом декораторе, который 

<template>
    <div>
        <div class="form-group" :class="{ 'form-group--error': $v.fullName.$error }">
            <label class="form__label">Name</label>
            <input class="form__input" v-model="fullName" @input="$v.fullName.$touch()" />
        </div>
        <span v-if="$v.fullName.nameValidator">
            {{$v.fullName | json}}}
        </span>

        <button @click="setMinLength()" >go</button>

        <span >
            {{$v | json}}}
        </span>
    </div>
</template>


<script lang="ts">
    import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
import { required, email, numeric, minLength, maxLength} from 'vuelidate/lib/validators';

Component.registerHooks(['validations']);
@Component()
export default class RegistrationFormComponent extends Vue {  

    validations() {
        return {
            fullName: {
                required,
                nameValidator: this.nameValidator
            }
        }
    }



    public fullName= '';
    public minLength:number= 3;

    nameValidator(value:string){
        return   this.minLength > value.length
    }


    setMinLength(){
        this.minLength = 5;
    }

    public created() {
    }


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    @import '../../assets/styles/styles.scss';
</style>
...