0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

Organization

ElementUIでformのsubmitボタンをdisabledにする

背景

ElementUIを使ってformを作成しています。

公式のサンプルにある通り、submitボタンを押下した際に、バリデーションを発火させるのは簡単にできます。
https://element.eleme.io/#/en-US/component/form#validation

ただ、今回はformを初期表示した際にsubmitボタンをdisabled状態(押下できない状態)にしたいというものです。

結論 validateStateをチェックする

解説

1: el-formにrefを設定する

スクリーンショット 2021-03-18 20.46.06.png

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の調整が入ります

感想

これが最適解かどうかわからないので、良い案あればご教示いただきたいです
読んでいただきありがとうございました

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?