new project Vue component is responsible for form validation
This commit is contained in:
parent
293f94cae1
commit
729c96de3a
@ -32,6 +32,7 @@ export default {
|
||||
).map(createEnvironment)
|
||||
|
||||
return {
|
||||
showError: false,
|
||||
environments,
|
||||
name,
|
||||
}
|
||||
@ -41,6 +42,12 @@ export default {
|
||||
this.$root.$on('onEnvironmentAdded', this.addEnvironment)
|
||||
},
|
||||
|
||||
updated: function() {
|
||||
if (this.environmentsHaveNames()) {
|
||||
this.showError = false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addEnvironment: function (event) {
|
||||
this.environments.push(createEnvironment(""))
|
||||
@ -50,6 +57,29 @@ export default {
|
||||
if (this.environments.length > 1) {
|
||||
this.environments.splice(index, 1)
|
||||
}
|
||||
},
|
||||
|
||||
environmentsHaveNames: function () {
|
||||
return this.environments.every((e) => e.name !== "")
|
||||
},
|
||||
|
||||
validateAndOpenModal: function (modalName) {
|
||||
const textInputs = this.$children.reduce((previous, newVal) => {
|
||||
// display textInput error if it is not valid
|
||||
if (!newVal.showValid) {
|
||||
newVal.showError = true
|
||||
}
|
||||
|
||||
return newVal.showValid && previous
|
||||
}, true)
|
||||
|
||||
const isValid = textInputs && this.environmentsHaveNames()
|
||||
|
||||
if (isValid) {
|
||||
this.openModal(modalName)
|
||||
} else {
|
||||
this.showError = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -47,6 +47,9 @@
|
||||
{{ Alert(error, level="error") }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<div v-if="showError">
|
||||
{{ Alert("Provide at least one environment name.", level="error") }}
|
||||
</div>
|
||||
|
||||
<div class="block-list project-list-item">
|
||||
<header class="block-list__header block-list__header--grow">
|
||||
@ -76,7 +79,7 @@
|
||||
|
||||
|
||||
<div class="action-group">
|
||||
<button v-on:click="openModal('{{ modalName }}')" class="usa-button usa-button-primary" tabindex="0" type="button">{{ action_text }} Project</button>
|
||||
<button v-on:click="validateAndOpenModal('{{ modalName }}')" class="usa-button usa-button-primary" tabindex="0" type="button">{{ action_text }} Project</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user