Zaawansowane Formularze

Budujmy bardziej złożone formularze dla systemów NOVA LAB.

Multi-select

1<template>
2  <div>
3    <label>Wybierz systemy do monitorowania (Ctrl+Click):</label>
4    <select v-model="selectedSystems" multiple>
5      <option value="oxygen">Generator tlenu</option>
6      <option value="water">Recykler wody</option>
7      <option value="power">Zasilanie solarne</option>
8      <option value="comms">Komunikacja</option>
9    </select>
10    <p>Wybrane: {{ selectedSystems.join(', ') }}</p>
11  </div>
12</template>
13
14<script setup>
15import { ref } from 'vue'
16
17const selectedSystems = ref([])
18</script>

Dynamiczne Opcje

1<template>
2  <div>
3    <select v-model="selectedModule">
4      <option disabled value="">Wybierz moduł stacji</option>
5      <option
6        v-for="mod in modules"
7        :key="mod.id"
8        :value="mod.id"
9      >
10        {{ mod.name }} ({{ mod.sector }})
11      </option>
12    </select>
13
14    <p v-if="selectedModule">
15      Wybrany: {{ getModuleName(selectedModule) }}
16    </p>
17  </div>
18</template>
19
20<script setup>
21import { ref } from 'vue'
22
23const modules = ref([
24  { id: 1, name: 'Oxygen Alpha', sector: 'Sektor A' },
25  { id: 2, name: 'Plasma Beta', sector: 'Sektor B' },
26  { id: 3, name: 'Water Gamma', sector: 'Sektor C' }
27])
28
29const selectedModule = ref('')
30
31function getModuleName(id) {
32  return modules.value.find(m => m.id === id)?.name || ''
33}
34</script>

Walidacja Formularza

1<template>
2  <form @submit.prevent="submitForm">
3    <div :class="{ error: errors.name }">
4      <label>Nazwa modułu:</label>
5      <input v-model="form.name" @blur="validateName" />
6      <span v-if="errors.name" class="error-message">
7        {{ errors.name }}
8      </span>
9    </div>
10
11    <div :class="{ error: errors.year }">
12      <label>Rok wdrożenia:</label>
13      <input v-model.number="form.year" type="number" @blur="validateYear" />
14      <span v-if="errors.year" class="error-message">
15        {{ errors.year }}
16      </span>
17    </div>
18
19    <div :class="{ error: errors.engineer }">
20      <label>Inżynier odpowiedzialny:</label>
21      <input v-model.trim="form.engineer" @blur="validateEngineer" />
22      <span v-if="errors.engineer" class="error-message">
23        {{ errors.engineer }}
24      </span>
25    </div>
26
27    <button type="submit" :disabled="!isFormValid">
28      Zarejestruj moduł
29    </button>
30  </form>
31</template>
32
33<script setup>
34import { reactive, computed } from 'vue'
35
36const form = reactive({
37  name: '',
38  year: null,
39  engineer: ''
40})
41
42const errors = reactive({
43  name: '',
44  year: '',
45  engineer: ''
46})
47
48function validateName() {
49  if (!form.name) {
50    errors.name = 'Nazwa jest wymagana'
51  } else if (form.name.length < 3) {
52    errors.name = 'Nazwa musi mieć min. 3 znaki'
53  } else {
54    errors.name = ''
55  }
56}
57
58function validateYear() {
59  if (!form.year) {
60    errors.year = 'Rok jest wymagany'
61  } else if (form.year < 2020 || form.year > 2100) {
62    errors.year = 'Rok musi być między 2020 a 2100'
63  } else {
64    errors.year = ''
65  }
66}
67
68function validateEngineer() {
69  errors.engineer = form.engineer ? '' : 'Inżynier jest wymagany'
70}
71
72const isFormValid = computed(() => {
73  return form.name && form.year && form.engineer &&
74         !errors.name && !errors.year && !errors.engineer
75})
76
77function submitForm() {
78  validateName()
79  validateYear()
80  validateEngineer()
81
82  if (isFormValid.value) {
83    console.log('Rejestracja:', form)
84    alert('Moduł zarejestrowany!')
85  }
86}
87</script>