배경

ElementUI를 사용하여 양식을 작성하고 있습니다.

공식 샘플에서 볼 수 있듯이 submit 버튼을 누를 때 유효성 검사를 발화하는 것은 간단합니다.
htps : ///에멘 t. 네. 이오 / # / 엔 - S / 코 m 포넨 t / 후 rm # ゔ ぃ 다치 온

다만, 이번은 form를 초기 표시했을 때에 submit 버튼을 disabled 상태(누를 수 없는 상태)로 하고 싶다고 하는 것입니다.

결론 validateState 확인

해설

1: el-form에 ref 설정

2: 그 ref에서 validateState를보고 유효성 검사 상태 확인

샘플 코드

<template>
  <div id="app">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
    >
    　<!-- 省略 -->
      <el-form-item>
        <el-button
          :disabled="isInValid"
          type="primary"
          @click="submitForm('ruleForm')"
          >Create</el-button
        >
        <el-button @click="resetForm('ruleForm')">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
    data() {
      return {
        // その他省略
        isInValid: false, //これでdisabledかを保持する
    };
  },
  mounted() {
    let isSomeEmpty = false;
    let hasSomeError = false;
    // $refsからruleFormを取得し、fieldsに対してループを回す
    this.$refs.ruleForm.fields.forEach((field) => {
      /* fieldのvalidateを確認する
       * validateState === "error"  : バリデーションエラー
       * validateState === ""       : 未入力
       * validateState === "success": バリデーションクリア
       */
      if (field.validateState === "error") {
        isSomeEmpty = true;
      }
      if (field.validateState === "") {
        hasSomeError = true;
      }
      this.isInValid = isSomeEmpty || hasSomeError;
    });
  },
};
</script>

fields는 el-form-item의 배열입니다.
el-form-item은 prop이라는 속성을 가지며, 그 prop의 값으로 어떤 입력란을 판별할 수 있습니다.
그리고 validateState라는 프로퍼티가 있어, 이것으로 검증의 상태를 판별할 수 있습니다
validateState는 다음과 같이 3개의 패턴으로 나뉩니다.

validateState:"error"  -> バリデーションエラー
validateState:""       -> 未入力
validateState:"success"-> バリデーションクリア

그러므로, 미입력 상태의 것인가, 에러 상태의 것이 있으면 버튼을 disabled로 하면 된다고 하는 것이군요

※ 주의
샘플 코드에서는 초기 표시만의 대응입니다만, 입력 항목에 변경 가해졌을 때 등에 isInValid의 조정이 들어갑니다

감상

이것이 최적의 솔루션인지 확실하지 않으므로 좋은 제안이 있다면 가르치고 싶습니다.
읽어 주셔서 감사합니다.