Skip to content

V-text-field

Error Bucket

다음과 같이 하단에 출력되는 부분임.

V-text-field-error-buckets.png

Methods

validate

구현된 내용은 다음과 같다: 

    validate (force = false, value?: any): boolean {
      const errorBucket = []
      value = value || this.internalValue

      if (force) this.hasInput = this.hasFocused = true

      for (let index = 0; index < this.rules.length; index++) {
        const rule = this.rules[index]
        const valid = typeof rule === 'function' ? rule(value) : rule

        if (valid === false || typeof valid === 'string') {
          errorBucket.push(valid || '')
        } else if (typeof valid !== 'boolean') {
          consoleError(`Rules should return a string or boolean, received '${typeof valid}' instead`, this)
        }
      }

      this.errorBucket = errorBucket
      this.valid = errorBucket.length === 0

      return this.valid
    },

코드에서 직접 rules 호출 방법

v-text-field의 validate() 함수를 호출 하면 된다. 

const V_TEXT_FIELD_VALIDATE = 'validate';

  // ...

  validateForms(): boolean {
    const fields = [this.$refs.usernameField, this.$refs.passwordField];
    let result = true;
    for (const key in fields) {
      const field = fields[key];
      if (!field) {
        continue;
      }

      const validate = field[V_TEXT_FIELD_VALIDATE];
      if (validate === undefined) {
        continue;
      }

      // You need to repeat the validation function for every field.
      if (!validate(true)) {
        result = false;
      }
    }
    return result;
  }

Troubleshooting

v-text-field 의 errorBuckets 이 언어 변경시 적용되지 않는 현상

#Error Bucket이 이미 출력된 다음, vue-i18n와 함께 언어를 변경하면 변경되지 않는다. 이 경우 v-text-field의 validations 값을 확인하여, validate() 함수를 재 호출 하면 된다. 

const V_TEXT_FIELD_VALIDATE = 'validate';
const V_TEXT_FIELD_VALIDATIONS = 'validations';

  // ...

  updateErrorBuckets() {
    const fields = [this.$refs.usernameField, this.$refs.passwordField];
    let result = true;
    for (const key in fields) {
      const field = fields[key];
      if (!field) {
        continue;
      }

      const validate = field[V_TEXT_FIELD_VALIDATE];
      const validations = field[V_TEXT_FIELD_VALIDATIONS];
      if (validate === undefined || validations === undefined) {
        continue;
      }

      if (validations.length >= 1) {
        validate(true);
      }
    }
    return result;
  }

  // ...

}

See also