Disable the form button with a slot scope

webapp/components/Password/Change.vue

@@ -3,10 +3,8 @@
     v-model="formData"
     :schema="formSchema"
     @submit="handleSubmit"
-    @input="handleInput"
-    @input-valid="handleInputValid"
   >
-    <template>
+    <template slot-scope="{ errors }">
       <ds-input
         id="oldPassword"
         model="oldPassword"
@@ -30,7 +28,7 @@
       />
       <password-strength :password="formData.newPassword" />
       <ds-space margin-top="base">
-        <ds-button :loading="loading" :disabled="disabled" primary>
+        <ds-button :loading="loading" :disabled="errors" primary>
           {{ $t('settings.security.change-password.button') }}
         </ds-button>
       </ds-space>
@@ -81,12 +79,6 @@ export default {
     }
   },
   methods: {
-    async handleInput(data) {
-      this.disabled = true
-    },
-    async handleInputValid(data) {
-      this.disabled = false
-    },
     async handleSubmit(data) {
       this.loading = true
       const mutation = gql`

webapp/components/PasswordReset/ChangePassword.vue

@@ -1,16 +1,14 @@
 <template>
   <ds-card class="verify-code">
     <ds-space margin="large">
-      <template>
       <ds-form
         v-if="!changePasswordResult"
         v-model="formData"
         :schema="formSchema"
         @submit="handleSubmitPassword"
-          @input="handleInput"
-          @input-valid="handleInputValid"
         class="change-password"
       >
+        <template slot-scope="{ errors }">
           <ds-input
             id="newPassword"
             model="newPassword"
@@ -27,10 +25,11 @@
           />
           <password-strength :password="formData.newPassword" />
           <ds-space margin-top="base">
-            <ds-button :loading="$apollo.loading" :disabled="disabled" primary>
+            <ds-button :loading="$apollo.loading" :disabled="errors" primary>
               {{ $t('settings.security.change-password.button') }}
             </ds-button>
           </ds-space>
+        </template>
       </ds-form>
       <ds-text v-else>
         <template v-if="changePasswordResult === 'success'">
@@ -48,7 +47,6 @@
           <a href="mailto:support@human-connection.org">support@human-connection.org</a>
         </template>
       </ds-text>
-      </template>
     </ds-space>
   </ds-card>
 </template>
@@ -95,12 +93,6 @@ export default {
     }
   },
   methods: {
-    async handleInput() {
-      this.disabled = true
-    },
-    async handleInputValid() {
-      this.disabled = false
-    },
     async handleSubmitPassword() {
       const mutation = gql`
         mutation($code: String!, $email: String!, $newPassword: String!) {

webapp/components/Registration/CreateUserAccount.vue

@@ -10,12 +10,11 @@
   <ds-form
     v-else
     class="create-user-account"
-    @input="handleInput"
-    @input-valid="handleInputValid"
     v-model="formData"
     :schema="formSchema"
     @submit="submit"
   >
+    <template slot-scope="{ errors }">
       <ds-card :header="$t('registration.create-user-account.title')">
         <ds-input
           id="name"
@@ -58,13 +57,14 @@
             icon="check"
             type="submit"
             :loading="$apollo.loading"
-          :disabled="disabled"
+            :disabled="errors"
             primary
           >
             {{ $t('actions.save') }}
           </ds-button>
         </template>
       </ds-card>
+    </template>
   </ds-form>
 </template>
 
@@ -131,12 +131,6 @@ export default {
     email: { type: String, required: true },
   },
   methods: {
-    async handleInput() {
-      this.disabled = true
-    },
-    async handleInputValid() {
-      this.disabled = false
-    },
     async submit() {
       const { name, password, about } = this.formData
       const { email, nonce } = this