Form

<template>
  <div>
    <nly-form @submit="onSubmit" @reset="onReset" v-if="show">
      <nly-form-group
        id="input-group-1"
        label="邮件:"
        label-for="input-1"
        description="请输入您的邮件地址"
      >
        <nly-form-input
          id="input-1"
          v-model="form.email"
          type="email"
          required
          placeholder="Enter email"
        ></nly-form-input>
      </nly-form-group>

      <nly-form-group id="input-group-2" label="姓名:" label-for="input-2">
        <nly-form-input
          id="input-2"
          v-model="form.name"
          required
          placeholder="Enter name"
        ></nly-form-input>
      </nly-form-group>

      <nly-form-group id="input-group-3" label="Food:" label-for="input-3">
        <nly-form-select
          id="input-3"
          v-model="form.food"
          :options="foods"
          required
        ></nly-form-select>
      </nly-form-group>

      <nly-button type="submit" variant="primary">Submit</nly-button>
      <nly-button type="reset" variant="danger">Reset</nly-button>
    </nly-form>
    <nly-card class="mt-3" header-variant="info" header-outline>
      <nly-card-header>
        输入结果
      </nly-card-header>
      <nly-card-body>
        <pre class="m-0">{{ form }}</pre>
      </nly-card-body>
    </nly-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          email: "",
          name: "",
          food: null
        },
        foods: [
          { text: "请选择", value: null },
          "作者帅",
          "作者屌大",
          "作者大佬",
          "牛逼"
        ],
        show: true
      };
    },
    methods: {
      onSubmit(evt) {
        evt.preventDefault();
        alert(JSON.stringify(this.form));
      },
      onReset(evt) {
        evt.preventDefault();
        this.form.email = "";
        this.form.name = "";
        this.form.food = null;
        this.show = false;
        this.$nextTick(() => {
          this.show = true;
        });
      }
    }
  };
</script>

<!-- 简介 .name -->
<!-- form.vue -->

<div>
  <nly-form inline>
    <label class="sr-only" for="inline-form-input-name">名字</label>
    <nly-input
      id="inline-form-input-name"
      class="mb-2 mr-sm-2 mb-sm-0"
      placeholder="Jane Doe"
    ></nly-input>

    <label class="sr-only" for="inline-form-input-username">用户名</label>
    <nly-input-group prepend="@" class="mb-2 mr-sm-2 mb-sm-0">
      <nly-input
        id="inline-form-input-username"
        placeholder="Username"
      ></nly-input>
    </nly-input-group>

    <nly-button variant="primary">保存</nly-button>
  </nly-form>
</div>

<!-- inline.name -->
<!-- inline.vue -->

<div>
  <nly-form inline>
    <label class="mr-sm-2" for="inline-form-custom-select-pref"
      >Preference</label
    >
    <nly-form-select
      id="inline-form-custom-select-pref"
      class="mb-2 mr-sm-2 mb-sm-0"
      :options="[{ text: 'Choose...', value: null }, 'One', 'Two', 'Three']"
      :value="null"
    ></nly-form-select>
    <nly-button variant="primary">保存</nly-button>
  </nly-form>
</div>

<!-- inline.name -->
<!-- inline.vue -->

<div>
  <nly-form @submit.stop.prevent>
    <label for="text-password">Password</label>
    <nly-input
      type="password"
      id="text-password"
      aria-describedby="password-help-block"
    ></nly-input>
    <nly-form-text id="password-help-block" text-variant="yellow">
      Your password must be 8-20 characters long, contain letters and numbers,
      and must not contain spaces, special characters, or emoji.
    </nly-form-text>
  </nly-form>
</div>

<!-- form-text.name -->
<!-- form-text.vue -->

<template>
  <div>
    <nly-form @submit.stop.prevent>
      <label for="feedback-user">User ID</label>
      <nly-input
        v-model="userId"
        :valid="validation"
        id="feedback-user"
      ></nly-input>
      <nly-form-feedback state="invalid">
        Your user ID must be 5-12 characters long.
      </nly-form-feedback>
      <nly-form-feedback state="valid">
        Looks Good.
      </nly-form-feedback>
    </nly-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userId: ""
      };
    },
    computed: {
      validation() {
        return this.userId.length > 4 && this.userId.length < 13
          ? "valid"
          : "invalid";
      }
    }
  };
</script>

<!-- valid.name -->
<!-- valid.vue -->

<template>
  <label for="input-with-list">Input with datalist</label>
  <nly-form-input list="input-list" id="input-with-list"></nly-form-input>
  <nly-form-datalist id="input-list" :options="options"></nly-form-datalist>
</template>

<script>
  export default {
    data() {
      return {
        options: ["Apple", "Banana", "Grape", "Kiwi", "Orange"]
      };
    }
  };
</script>

<!-- datalist.name -->
<!-- datalist.vue -->