Vue.js — Element UI — получить состояние проверки формы

введите здесь описание изображения

Действия по воспроизведению

Повторяющаяся ссылка: https://stackblitz.com/edit/typescript-vuejs-element-3kko7a

password input 2

username input 11

Change username to 2// should be able to submit, but not

Ожидается: formvalid = true

Подтвердите код здесь:

 checkForm() {
        // console.log('validate runs');
        // @ts-ignore
        const fields = this.$refs.ruleForm.fields;
        if (fields.find((f) => f.validateState === 'validating')) {
          setTimeout(() => {
            this.checkForm();
          }, 100);
        }
        this.formValid = fields.reduce((acc, f) => {
          const valid = (f.isRequired && f.validateState === 'success');
          const notErroring = (!f.isRequired && f.validateState !== 'error');
          return acc && (valid || notErroring);
        }, true);
        console.log('valid:', this.$data.formValid);
      }

vue.js vuejs2 element-ui
person wgf4242    schedule 07.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

По сути, вы смотрите ruleForm, поэтому каждый раз, когда изменяется ruleForm, вы запускаете checkform, но ваш валидатор срабатывает на blur после того, как вы установили ruleForm, поэтому вы сначала тестируете, а затем подтверждаете. измените это на геттер:

get formValid(){

   const fields = this.$refs.ruleForm.fields || [];
    if (fields.find((f) => f.validateState === 'validating')) {
      setTimeout(() => {
        this.checkForm();
      }, 100);
    }
    return fields.reduce((acc, f) => {
      const valid = (f.isRequired && f.validateState === 'success');
      const notErroring = (!f.isRequired && f.validateState !== 'error');
      return acc && (valid || notErroring);
    }, fields.length > 0);
}
person Estradiaz    schedule 07.08.2019
comment
Я редактирую код, но все равно не работает, как переписать this.checkForm или вызвать этот метод получения? stackblitz.com/edit/typescript-vuejs-element-amglzq - person wgf4242; 08.08.2019
comment
кто-нибудь здесь ? любая помощь? - person wgf4242; 08.08.2019