@projectcaluma/ember-form 10.0.1 → 11.0.0-beta.10

package/addon/lib/field.js

@@ -1,15 +1,15 @@
 import { getOwner } from "@ember/application";
 import { assert } from "@ember/debug";
-import { computed, defineProperty } from "@ember/object";
-import { equal, not, reads } from "@ember/object/computed";
+import { associateDestroyableChild } from "@ember/destroyable";
 import { inject as service } from "@ember/service";
 import { camelize } from "@ember/string";
+import { isEmpty } from "@ember/utils";
+import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
-import { task } from "ember-concurrency";
+import { restartableTask, lastValue, dropTask } from "ember-concurrency";
 import { validate } from "ember-validators";
-import cloneDeep from "lodash.clonedeep";
 import isEqual from "lodash.isequal";
-import { all, resolve } from "rsvp";
+import { cached } from "tracked-toolbox";
 
 import { decodeId } from "@projectcaluma/ember-core/helpers/decode-id";
 import saveDocumentDateAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-date-answer.graphql";
@@ -19,12 +19,9 @@ import saveDocumentIntegerAnswerMutation from "@projectcaluma/ember-form/gql/mut
 import saveDocumentListAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-list-answer.graphql";
 import saveDocumentStringAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-string-answer.graphql";
 import saveDocumentTableAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-table-answer.graphql";
-import getDocumentUsedDynamicOptionsQuery from "@projectcaluma/ember-form/gql/queries/get-document-used-dynamic-options.graphql";
+import getDocumentUsedDynamicOptionsQuery from "@projectcaluma/ember-form/gql/queries/document-used-dynamic-options.graphql";
 import Base from "@projectcaluma/ember-form/lib/base";
-import {
-  nestedDependencyParents,
-  dependencies,
-} from "@projectcaluma/ember-form/lib/dependencies";
+import dependencies from "@projectcaluma/ember-form/lib/dependencies";
 
 export const TYPE_MAP = {
   TextQuestion: "StringAnswer",
@@ -42,10 +39,20 @@ export const TYPE_MAP = {
   DateQuestion: "DateAnswer",
 };
 
-const fieldIsHidden = (field) => {
+const MUTATION_MAP = {
+  FloatAnswer: saveDocumentFloatAnswerMutation,
+  IntegerAnswer: saveDocumentIntegerAnswerMutation,
+  StringAnswer: saveDocumentStringAnswerMutation,
+  ListAnswer: saveDocumentListAnswerMutation,
+  FileAnswer: saveDocumentFileAnswerMutation,
+  DateAnswer: saveDocumentDateAnswerMutation,
+  TableAnswer: saveDocumentTableAnswerMutation,
+};
+
+const fieldIsHiddenOrEmpty = (field) => {
   return (
     field.hidden ||
-    (field.question.__typename !== "TableQuestion" &&
+    (!field.question.isTable &&
       (field.answer.value === null || field.answer.value === undefined))
   );
 };
@@ -55,61 +62,44 @@ const fieldIsHidden = (field) => {
  *
  * @class Field
  */
-export default Base.extend({
-  saveDocumentFloatAnswerMutation,
-  saveDocumentIntegerAnswerMutation,
-  saveDocumentStringAnswerMutation,
-  saveDocumentListAnswerMutation,
-  saveDocumentFileAnswerMutation,
-  saveDocumentDateAnswerMutation,
-  saveDocumentTableAnswerMutation,
-
-  intl: service(),
-  calumaStore: service(),
-  validator: service(),
-
-  apollo: queryManager(),
-
-  init(...args) {
-    assert("A document must be passed", this.document);
-
-    defineProperty(this, "pk", {
-      writable: false,
-      value: `${this.document.pk}:Question:${this.raw.question.slug}`,
-    });
+export default class Field extends Base {
+  @service intl;
 
-    this._super(...args);
+  @queryManager apollo;
 
-    this._createQuestion();
-    this._createAnswer();
+  constructor({ fieldset, ...args }) {
+    assert("`fieldset` must be passed as an argument", fieldset);
 
-    this.set("_errors", []);
-  },
+    super({ fieldset, ...args });
 
-  willDestroy(...args) {
-    this._super(...args);
+    this.fieldset = fieldset;
 
-    if (this.answer) {
-      this.answer.destroy();
-    }
-  },
+    this.pushIntoStore();
+
+    this._createQuestion();
+    this._createAnswer();
+  }
 
   _createQuestion() {
+    const owner = getOwner(this);
+
     const question =
       this.calumaStore.find(`Question:${this.raw.question.slug}`) ||
-      getOwner(this)
-        .factoryFor("caluma-model:question")
-        .create({ raw: this.raw.question });
+      new (owner.factoryFor("caluma-model:question").class)({
+        raw: this.raw.question,
+        owner,
+      });
 
     if (question.isDynamic) {
       question.loadDynamicOptions.perform();
     }
 
-    this.set("question", question);
-  },
+    this.question = question;
+  }
 
   _createAnswer() {
-    const AnswerFactory = getOwner(this).factoryFor("caluma-model:answer");
+    const owner = getOwner(this);
+    const Answer = owner.factoryFor("caluma-model:answer").class;
     let answer;
 
     // no answer passed, create an empty one
@@ -121,182 +111,188 @@ export default Base.extend({
         return;
       }
 
-      answer = AnswerFactory.create({
+      answer = new Answer({
         raw: {
+          id: null,
           __typename: answerType,
           question: { slug: this.raw.question.slug },
           [camelize(answerType.replace(/Answer$/, "Value"))]: null,
         },
         field: this,
+        owner,
       });
     } else {
       answer =
         this.calumaStore.find(`Answer:${decodeId(this.raw.answer.id)}`) ||
-        AnswerFactory.create({ raw: this.raw.answer, field: this });
+        new Answer({ raw: this.raw.answer, field: this, owner });
     }
 
-    this.set("answer", answer);
-  },
+    this.answer = associateDestroyableChild(this, answer);
+  }
 
   /**
    * The question to this field
    *
    * @property {Question} question
-   * @accessor
    */
-  question: null,
+  question = null;
 
   /**
    * The answer to this field. It is possible for this to be `null` if the
    * question is of the static question type.
    *
    * @property {Answer} answer
-   * @accessor
    */
-  answer: null,
+  answer = null;
+
+  /**
+   * The raw error objects which are later translated to readable messages.
+   *
+   * @property {Object[]} _errors
+   * @private
+   */
+  @tracked _errors = [];
+
+  /**
+   * Currently rendered field components that use this field. This is used in
+   * the document validity component to await all current save tasks before
+   * validating.
+   *
+   * @property {Set} _components
+   * @private
+   */
+  _components = new Set();
+
+  /**
+   * The primary key of the field. Consists of the document and question primary
+   * keys.
+   *
+   * @property {String} pk
+   */
+  @cached
+  get pk() {
+    return `${this.document.pk}:Question:${this.raw.question.slug}`;
+  }
 
   /**
    * Whether the field is valid.
    *
    * @property {Boolean} isValid
-   * @accessor
    */
-  isValid: equal("errors.length", 0),
+  get isValid() {
+    return this.errors.length === 0;
+  }
 
   /**
    * Whether the field is invalid.
    *
    * @property {Boolean} isInvalid
-   * @accessor
    */
-  isInvalid: not("isValid"),
+  get isInvalid() {
+    return !this.isValid;
+  }
 
   /**
    * Whether the field is new (never saved to the backend service or empty)
    *
    * @property {Boolean} isNew
-   * @accessor
    */
-  isNew: computed("answer.isNew", function () {
+  get isNew() {
     return !this.answer || this.answer.isNew;
-  }),
+  }
 
   /**
    * Only table values, this is used for certain computed property keys.
    *
    * @property {Document[]} tableValue
-   * @accessor
    */
-  tableValue: computed("value", "question.isTable", function () {
+  get tableValue() {
     return this.question.isTable ? this.value : [];
-  }),
+  }
 
   /**
    * Whether the field has the defined default answer of the question as value.
    *
    * @property {Boolean} isDefault
-   * @accessor
    */
-  isDefault: computed(
-    "value",
-    "tableValue.@each.flatAnswerMap",
-    "question.{isTable,defaultValue}",
-    function () {
-      if (!this.value || !this.question.defaultValue) return false;
+  get isDefault() {
+    if (!this.value || !this.question.defaultValue) return false;
 
-      const value = this.question.isTable
-        ? this.tableValue.map((doc) => doc.flatAnswerMap)
-        : this.value;
+    const value = this.question.isTable
+      ? this.tableValue.map((doc) => doc.flatAnswerMap)
+      : this.value;
 
-      return isEqual(value, this.question.defaultValue);
-    }
-  ),
+    return isEqual(value, this.question.defaultValue);
+  }
 
   /**
    * Whether the field is dirty. This will be true, if there is a value on the
    * answer which differs from the default value of the question.
    *
    * @property {Boolean} isDirty
-   * @accessor
-   */
-  isDirty: computed(
-    "isDefault",
-    "isNew",
-    "question.isCalculated",
-    "validate.lastSuccessful",
-    function () {
-      if (this.question.isCalculated || this.isDefault) {
-        return false;
-      }
-
-      return Boolean(this.validate.lastSuccessful) || !this.isNew;
+   */
+  get isDirty() {
+    if (this.question.isCalculated || this.isDefault) {
+      return false;
     }
-  ),
+
+    return Boolean(this.validate.lastSuccessful) || !this.isNew;
+  }
 
   /**
    * The type of the question
    *
    * @property {String} questionType
-   * @accessor
    */
-  questionType: reads("question.__typename"),
+  get questionType() {
+    return this.question.raw.__typename;
+  }
 
   /**
    * The document this field belongs to
    *
    * @property {Document} document
-   * @accessor
    */
-  document: reads("fieldset.document"),
+  get document() {
+    return this.fieldset.document;
+  }
 
   /**
    * The value of the field
    *
    * @property {*} value
-   * @accessor
-   */
-  value: computed(
-    "question.isCalculated",
-    "calculatedValue",
-    "answer.value",
-    function () {
-      if (this.question.isCalculated) {
-        return this.calculatedValue;
-      }
-
-      return this.answer?.value;
+   */
+  get value() {
+    if (this.question.isCalculated) {
+      return this.calculatedValue;
     }
-  ),
+
+    return this.answer?.value;
+  }
 
   /**
-   * The computed value of a caluclated question
+   * The computed value of a calculated float question
    *
    * @property {*} calculatedValue
-   * @accessor
-   */
-  calculatedValue: computed(
-    "document.jexl",
-    "calculatedDependencies.@each.{hidden,value}",
-    "jexlContext",
-    "question.{isCalculated,calcExpression}",
-    function () {
-      if (
-        !this.question.isCalculated ||
-        !this.calculatedDependencies.every((field) => !field.hidden)
-      ) {
-        return null;
-      }
+   */
+  @cached
+  get calculatedValue() {
+    if (
+      !this.question.isCalculated ||
+      !this.calculatedDependencies.every((field) => !field.hidden)
+    ) {
+      return null;
+    }
 
-      try {
-        return this.document.jexl.evalSync(
-          this.question.calcExpression,
-          this.jexlContext
-        );
-      } catch (error) {
-        return null;
-      }
+    try {
+      return this.document.jexl.evalSync(
+        this.question.raw.calcExpression,
+        this.jexlContext
+      );
+    } catch (error) {
+      return null;
     }
-  ),
+  }
 
   /**
    * Fetch all formerly used dynamic options for this question. This will be
@@ -306,7 +302,8 @@ export default Base.extend({
    * @return {Object[]} Formerly used dynamic options
    * @private
    */
-  _fetchUsedDynamicOptions: task(function* () {
+  @dropTask
+  *_fetchUsedDynamicOptions() {
     if (!this.question.isDynamic) return null;
 
     const edges = yield this.apollo.query(
@@ -325,16 +322,15 @@ export default Base.extend({
       slug,
       label,
     }));
-  }),
+  }
 
   /**
    * The formerly used dynamic options for this question.
    *
    * @property {Object[]} usedDynamicOptions
-   * @accessor
-   *
    */
-  usedDynamicOptions: reads("_fetchUsedDynamicOptions.lastSuccessful.value"),
+  @lastValue("_fetchUsedDynamicOptions")
+  usedDynamicOptions;
 
   /**
    * The available options for choice questions. This only works for the
@@ -348,79 +344,67 @@ export default Base.extend({
    * This will also return the disabled state of the option. An option can only
    * be disabled, if it is an old value used in a dynamic question.
    *
-   * @property {Null|Object[]} options
-   * @accessor
-   */
-  options: computed(
-    "_fetchUsedDynamicOptions.lastSuccessful",
-    "question.{options.[],isChoice,isDynamic,isMultipleChoice}",
-    "usedDynamicOptions.[]",
-    "value",
-    function () {
-      if (!this.question.isChoice && !this.question.isMultipleChoice) {
-        return null;
-      }
-
-      const selected =
-        (this.question.isMultipleChoice ? this.value : [this.value]) || [];
+   * @property {null|Object[]} options
+   */
+  @cached
+  get options() {
+    if (!this.question.isChoice && !this.question.isMultipleChoice) {
+      return null;
+    }
 
-      const options = this.question.options.filter(
-        (option) => !option.disabled || selected.includes(option.slug)
-      );
+    const selected =
+      (this.question.isMultipleChoice ? this.value : [this.value]) || [];
 
-      const hasUnknownValue = !selected.every((slug) =>
-        options.find((option) => option.slug === slug)
-      );
+    const options = this.question.options.filter(
+      (option) => !option.disabled || selected.includes(option.slug)
+    );
 
-      if (this.question.isDynamic && hasUnknownValue) {
-        if (!this._fetchUsedDynamicOptions.lastSuccessful) {
-          // Fetch used dynamic options if not done yet
-          this._fetchUsedDynamicOptions.perform();
-        }
+    const hasUnknownValue = !selected.every((slug) =>
+      options.find((option) => option.slug === slug)
+    );
 
-        return [
-          ...options,
-          ...(this.usedDynamicOptions || [])
-            .filter((used) => {
-              return (
-                selected.includes(used.slug) &&
-                !options.find((option) => option.slug === used.slug)
-              );
-            })
-            .map((used) => ({ ...used, disabled: true })),
-        ];
+    if (this.question.isDynamic && hasUnknownValue) {
+      if (!this._fetchUsedDynamicOptions.lastSuccessful) {
+        // Fetch used dynamic options if not done yet
+        this._fetchUsedDynamicOptions.perform();
       }
 
-      return options;
+      return [
+        ...options,
+        ...(this.usedDynamicOptions || [])
+          .filter((used) => {
+            return (
+              selected.includes(used.slug) &&
+              !options.find((option) => option.slug === used.slug)
+            );
+          })
+          .map((used) => ({ ...used, disabled: true })),
+      ];
     }
-  ),
+
+    return options;
+  }
 
   /**
    * The currently selected option. This property is only used for choice
    * questions. It can either return null if no value is selected yet, an
    * object for single choices or an array of objects for multiple choices.
    *
-   * @property {Null|Object|Object[]} selected
-   * @accessor
+   * @property {null|Object|Object[]} selected
    */
-  selected: computed(
-    "options.@each.slug",
-    "question.{isChoice,isMultipleChoice}",
-    "value",
-    function () {
-      if (!this.question.isChoice && !this.question.isMultipleChoice) {
-        return null;
-      }
+  get selected() {
+    if (!this.question.isChoice && !this.question.isMultipleChoice) {
+      return null;
+    }
 
-      const selected = this.options.filter(({ slug }) =>
-        this.question.isMultipleChoice
-          ? (this.value || []).includes(slug)
-          : this.value === slug
-      );
+    const selected = this.options.filter(({ slug }) =>
+      this.question.isMultipleChoice
+        ? (this.value || []).includes(slug)
+        : this.value === slug
+    );
 
-      return this.question.isMultipleChoice ? selected : selected[0];
-    }
-  ),
+    return this.question.isMultipleChoice ? selected : selected[0];
+  }
 
   /**
    * The field's JEXL context.
@@ -435,33 +419,25 @@ export default Base.extend({
    * - `info.root.formMeta`: The new property for the root form meta.
    *
    * @property {Object} jexlContext
-   * @accessor
-   */
-  jexlContext: computed(
-    "document.jexlContext",
-    "fieldset.{form.slug,form.meta,field.fieldset.form.slug,field.fieldset.form.meta}",
-    function () {
-      const context = cloneDeep(this.document.jexlContext);
-
-      const form = this.get("fieldset.form");
-      const parent = this.get("fieldset.field.fieldset.form");
-
-      return {
-        ...context,
-        info: {
-          ...context.info,
-          form: form.slug,
-          formMeta: form.meta,
-          parent: parent
-            ? {
-                form: parent.slug,
-                formMeta: parent.meta,
-              }
-            : null,
-        },
-      };
-    }
-  ),
+   */
+  get jexlContext() {
+    const parent = this.fieldset.field?.fieldset.form;
+
+    return {
+      ...this.document.jexlContext,
+      info: {
+        ...this.document.jexlContext.info,
+        form: this.fieldset.form.slug,
+        formMeta: this.fieldset.form.raw.meta,
+        parent: parent
+          ? {
+              form: parent.slug,
+              formMeta: parent.raw.meta,
+            }
+          : null,
+      },
+    };
+  }
 
   /**
    * Fields that are referenced in the `calcExpression` JEXL expression
@@ -470,14 +446,8 @@ export default Base.extend({
    * expression needs to be re-evaluated.
    *
    * @property {Field[]} calculatedDependencies
-   * @accessor
    */
-  _calculatedNestedDependencyParents: nestedDependencyParents(
-    "question.calcExpression"
-  ),
-  calculatedDependencies: dependencies("question.calcExpression", {
-    nestedParentsPath: "_calculatedNestedDependencyParents",
-  }),
+  @dependencies("question.raw.calcExpression") calculatedDependencies;
 
   /**
    * Fields that are referenced in the `isHidden` JEXL expression
@@ -486,12 +456,8 @@ export default Base.extend({
    * expression needs to be re-evaluated.
    *
    * @property {Field[]} hiddenDependencies
-   * @accessor
    */
-  _hiddenNestedDependencyParents: nestedDependencyParents("question.isHidden"),
-  hiddenDependencies: dependencies("question.isHidden", {
-    nestedParentsPath: "_hiddenNestedDependencyParents",
-  }),
+  @dependencies("question.raw.isHidden") hiddenDependencies;
 
   /**
    * Fields that are referenced in the `isRequired` JEXL expression
@@ -500,14 +466,8 @@ export default Base.extend({
    * expression needs to be re-evaluated.
    *
    * @property {Field[]} optionalDependencies
-   * @accessor
    */
-  _optionalNestedDependencyParents: nestedDependencyParents(
-    "question.isRequired"
-  ),
-  optionalDependencies: dependencies("question.isRequired", {
-    nestedParentsPath: "_optionalNestedDependencyParents",
-  }),
+  @dependencies("question.raw.isRequired") optionalDependencies;
 
   /**
    * The field's hidden state
@@ -515,99 +475,85 @@ export default Base.extend({
    * A question is hidden if:
    * - The form question field of the fieldset is hidden
    * - All depending field (used in the expression) are hidden
-   * - The evaluated `question.isHidden` expression returns `true`
+   * - The evaluated `question.raw.isHidden` expression returns `true`
    *
    * @property {Boolean} hidden
    */
-  hidden: computed(
-    "document.jexl",
-    "fieldset.field.hidden",
-    "hiddenDependencies.@each.{hidden,value}",
-    "jexlContext",
-    "question.isHidden",
-    "pk",
-    function () {
-      if (
-        this.fieldset.field?.hidden ||
-        (this.hiddenDependencies.length &&
-          this.hiddenDependencies.every(fieldIsHidden))
-      ) {
-        return true;
-      }
+  @cached
+  get hidden() {
+    if (
+      this.fieldset.field?.hidden ||
+      (this.hiddenDependencies.length &&
+        this.hiddenDependencies.every(fieldIsHiddenOrEmpty))
+    ) {
+      return true;
+    }
 
-      try {
-        return this.document.jexl.evalSync(
-          this.question.isHidden,
-          this.jexlContext
-        );
-      } catch (error) {
-        throw new Error(
-          `Error while evaluating \`isHidden\` expression on field \`${this.pk}\`: ${error.message}`
-        );
-      }
+    try {
+      return this.document.jexl.evalSync(
+        this.question.raw.isHidden,
+        this.jexlContext
+      );
+    } catch (error) {
+      throw new Error(
+        `Error while evaluating \`isHidden\` expression on field \`${this.pk}\`: ${error.message}`
+      );
     }
-  ),
+  }
 
   /**
    * The field's optional state
    *
    * The field is optional if:
+   * - The question is of the type form or calculated float
    * - The form question field of the fieldset is hidden
    * - All depending fields (used in the expression) are hidden
-   * - The evaluated `question.isRequired` expression returns `false`
+   * - The evaluated `question.raw.isRequired` expression returns `false`
    * - The question type is FormQuestion or CalculatedFloatQuestion
    *
    * @property {Boolean} optional
    */
-  optional: computed(
-    "document.jexl",
-    "fieldset.field.hidden",
-    "jexlContext",
-    "optionalDependencies.@each.{hidden,value}",
-    "question.{__typename,isRequired}",
-    "pk",
-    function () {
-      if (
-        this.fieldset.field?.hidden ||
-        ["FormQuestion", "CalculatedFloatQuestion"].includes(
-          this.question.__typename
-        ) ||
-        (this.optionalDependencies.length &&
-          this.optionalDependencies.every(fieldIsHidden))
-      ) {
-        return true;
-      }
+  @cached
+  get optional() {
+    if (
+      ["FormQuestion", "CalculatedFloatQuestion"].includes(this.questionType) ||
+      this.fieldset.field?.hidden ||
+      (this.optionalDependencies.length &&
+        this.optionalDependencies.every(fieldIsHiddenOrEmpty))
+    ) {
+      return true;
+    }
 
-      try {
-        return !this.document.jexl.evalSync(
-          this.question.isRequired,
-          this.jexlContext
-        );
-      } catch (error) {
-        throw new Error(
-          `Error while evaluating \`isRequired\` expression on field \`${this.pk}\`: ${error.message}`
-        );
-      }
+    try {
+      return !this.document.jexl.evalSync(
+        this.question.raw.isRequired,
+        this.jexlContext
+      );
+    } catch (error) {
+      throw new Error(
+        `Error while evaluating \`isRequired\` expression on field \`${this.pk}\`: ${error.message}`
+      );
     }
-  ),
+  }
 
   /**
    * Task to save a field. This uses a different mutation for every answer
    * type.
    *
-   * @method save.perform
+   * @method save
    * @return {Object} The response from the server
    */
-  save: task(function* () {
+  @restartableTask
+  *save() {
     if (this.question.isCalculated) {
       return;
     }
 
-    const type = this.get("answer.__typename");
+    const type = this.answer.raw.__typename;
 
     const response = yield this.apollo.mutate(
       {
-        mutation: this.get(`saveDocument${type}Mutation`),
+        mutation: MUTATION_MAP[type],
         variables: {
           input: {
             question: this.question.slug,
@@ -621,49 +567,47 @@ export default Base.extend({
       `saveDocument${type}.answer`
     );
 
-    if (this.isNew) {
-      // if the answer was new we need to set a pk an push the answer to the
-      // store
-      this.answer.set("pk", `Answer:${decodeId(response.id)}`);
-
-      this.calumaStore.push(this.answer);
-    }
+    const wasNew = this.isNew;
 
-    // update the existing answer
-    this.answer.setProperties(response);
+    Object.entries(response).forEach(([key, value]) => {
+      this.answer.raw[key] = value;
+    });
 
-    this.set("raw.answer", response);
-    this.set("answer.raw", response);
+    if (wasNew) {
+      this.answer.pushIntoStore();
+    }
 
     return response;
-  }).restartable(),
+  }
 
   /**
-   * The error messages on this field.
+   * The translated error messages
    *
    * @property {String[]} errors
-   * @accessor
    */
-  errors: computed("_errors.[]", function () {
+  @cached
+  get errors() {
     return this._errors.map(({ type, context, value }) => {
       return this.intl.t(
         `caluma.form.validation.${type}`,
         Object.assign({}, context, { value })
       );
     });
-  }),
+  }
 
   /**
    * Validate the field. Every field goes through the required validation and
    * the validation for the given question type. This mutates the `errors` on
    * the field.
    *
-   * @method validate.perform
+   * @method validate
    */
-  validate: task(function* () {
-    const specificValidation = this.get(`_validate${this.question.__typename}`);
+  @restartableTask
+  *validate() {
+    const specificValidation = this[`_validate${this.questionType}`];
+
     assert(
-      `Missing validation function for ${this.question.__typename}`,
+      `Missing validation function for ${this.questionType}`,
       specificValidation
     );
 
@@ -672,7 +616,7 @@ export default Base.extend({
       specificValidation,
     ];
 
-    const errors = (yield all(
+    const errors = (yield Promise.all(
       validationFns.map(async (fn) => {
         const res = await fn.call(this);
 
@@ -682,121 +626,144 @@ export default Base.extend({
       .reduce((arr, e) => [...arr, ...e], []) // flatten the array
       .filter((e) => typeof e === "object");
 
-    this.set("_errors", errors);
-  }).restartable(),
+    this._errors = errors;
+  }
+
+  /**
+   * Validate the value against the regexes of the given format validators.
+   *
+   * @method _validateFormatValidators
+   * @return {Array<Boolean|Object>} An array of error objects or `true`
+   * @private
+   */
+  _validateFormatValidators() {
+    const validators =
+      this.question.raw.formatValidators?.edges.map((edge) => edge.node) ?? [];
+    const value = this.answer.value;
+
+    if (isEmpty(value)) {
+      // empty values should not be validated since they are handled by the
+      // requiredness validation
+      return validators.map(() => true);
+    }
+
+    return validators.map((validator) => {
+      return (
+        new RegExp(validator.regex).test(value) || {
+          type: "format",
+          context: { errorMsg: validator.errorMsg },
+          value,
+        }
+      );
+    });
+  }
 
   /**
    * Method to validate if a question is required or not.
    *
    * @method _validateRequired
-   * @return {RSVP.Promise} Returns an promise which resolves into an object if invalid or true if valid
-   * @internal
+   * @return {Boolean|Object} Returns an object if invalid or true if valid
+   * @private
    */
-  async _validateRequired() {
+  _validateRequired() {
     return (
       this.optional ||
-      validate("presence", this.get("answer.value"), { presence: true })
+      validate("presence", this.answer.value, { presence: true })
     );
-  },
+  }
 
   /**
    * Method to validate a text question. This checks if the value longer than
    * predefined by the question.
    *
    * @method _validateTextQuestion
-   * @return {Object|Boolean} Returns an object if invalid or true if valid
-   * @internal
+   * @return {Array<Boolean|Object>} An array of error objects or `true`
+   * @private
    */
-  async _validateTextQuestion() {
+  _validateTextQuestion() {
     return [
-      ...(await this.validator.validate(
-        this.get("answer.value"),
-        this.get("question.meta.formatValidators") || []
-      )),
-      validate("length", this.get("answer.value"), {
-        min: this.get("question.textMinLength") || 0,
-        max: this.get("question.textMaxLength") || Number.POSITIVE_INFINITY,
+      ...this._validateFormatValidators(),
+      validate("length", this.answer.value, {
+        min: this.question.raw.textMinLength || 0,
+        max: this.question.raw.textMaxLength || Number.POSITIVE_INFINITY,
       }),
     ];
-  },
+  }
 
   /**
    * Method to validate a textarea question. This checks if the value longer
    * than predefined by the question.
    *
    * @method _validateTextareaQuestion
-   * @return {Object|Boolean} Returns an object if invalid or true if valid
-   * @internal
+   * @return {Array<Boolean|Object>} An array of error objects or `true`
+   * @private
    */
-  async _validateTextareaQuestion() {
+  _validateTextareaQuestion() {
     return [
-      ...(await this.validator.validate(
-        this.get("answer.value"),
-        this.get("question.meta.formatValidators") || []
-      )),
-      validate("length", this.get("answer.value"), {
-        min: this.get("question.textareaMinLength") || 0,
-        max: this.get("question.textareaMaxLength") || Number.POSITIVE_INFINITY,
+      ...this._validateFormatValidators(),
+      validate("length", this.answer.value, {
+        min: this.question.raw.textareaMinLength || 0,
+        max: this.question.raw.textareaMaxLength || Number.POSITIVE_INFINITY,
       }),
     ];
-  },
+  }
 
   /**
    * Method to validate an integer question. This checks if the value is bigger
    * or less than the options provided by the question.
    *
    * @method _validateIntegerQuestion
-   * @return {Object|Boolean} Returns an object if invalid or true if valid
-   * @internal
+   * @return {Boolean|Object} Returns an object if invalid or true if valid
+   * @private
    */
   _validateIntegerQuestion() {
-    return validate("number", this.get("answer.value"), {
+    return validate("number", this.answer.value, {
       integer: true,
-      gte: this.get("question.integerMinValue") || Number.NEGATIVE_INFINITY,
-      lte: this.get("question.integerMaxValue") || Number.POSITIVE_INFINITY,
+      gte: this.question.raw.integerMinValue || Number.NEGATIVE_INFINITY,
+      lte: this.question.raw.integerMaxValue || Number.POSITIVE_INFINITY,
     });
-  },
+  }
 
   /**
    * Method to validate a float question. This checks if the value is bigger or
    * less than the options provided by the question.
    *
    * @method _validateFloatQuestion
-   * @return {Object|Boolean} Returns an object if invalid or true if valid
-   * @internal
+   * @return {Boolean|Object} Returns an object if invalid or true if valid
+   * @private
    */
   _validateFloatQuestion() {
-    return validate("number", this.get("answer.value"), {
-      gte: this.get("question.floatMinValue") || Number.NEGATIVE_INFINITY,
-      lte: this.get("question.floatMaxValue") || Number.POSITIVE_INFINITY,
+    return validate("number", this.answer.value, {
+      gte: this.question.raw.floatMinValue || Number.NEGATIVE_INFINITY,
+      lte: this.question.raw.floatMaxValue || Number.POSITIVE_INFINITY,
     });
-  },
+  }
 
   /**
    * Method to validate a radio question. This checks if the value is included
    * in the provided options of the question.
    *
    * @method _validateChoiceQuestion
-   * @return {Object|Boolean} Returns an object if invalid or true if valid
-   * @internal
+   * @return {Boolean|Object} Returns an object if invalid or true if valid
+   * @private
    */
   _validateChoiceQuestion() {
-    return validate("inclusion", this.get("answer.value"), {
+    return validate("inclusion", this.answer.value, {
       allowBlank: true,
       in: (this.options || []).map(({ slug }) => slug),
     });
-  },
+  }
 
   /**
    * Method to validate a checkbox question. This checks if the all of the
    * values are included in the provided options of the question.
    *
    * @method _validateMultipleChoiceQuestion
-   * @return {Object[]|Boolean[]|Mixed[]} Returns per value an object if invalid or true if valid
-   * @internal
+   * @return {Boolean|Object} Returns an object if invalid or true if valid
+   * @private
    */
   _validateMultipleChoiceQuestion() {
-    const value = this.get("answer.value");
+    const value = this.answer.value;
     if (!value) {
       return true;
     }
@@ -805,34 +772,34 @@ export default Base.extend({
         in: (this.options || []).map(({ slug }) => slug),
       })
     );
-  },
+  }
 
   /**
    * Method to validate a radio question. This checks if the value is included
    * in the provided options of the question.
    *
    * @method _validateChoiceQuestion
-   * @return {Object|Boolean} Returns an object if invalid or true if valid
-   * @internal
+   * @return {Promise<Boolean|Object>} A promise which resolves into an object if invalid or true if valid
+   * @private
    */
   async _validateDynamicChoiceQuestion() {
     await this.question.loadDynamicOptions.perform();
 
-    return validate("inclusion", this.get("answer.value"), {
+    return validate("inclusion", this.answer.value, {
       in: (this.options || []).map(({ slug }) => slug),
     });
-  },
+  }
 
   /**
    * Method to validate a checkbox question. This checks if the all of the
    * values are included in the provided options of the question.
    *
    * @method _validateMultipleChoiceQuestion
-   * @return {Object[]|Boolean[]|Mixed[]} Returns per value an object if invalid or true if valid
-   * @internal
+   * @return {Promise<Boolean[]|Object[]|Mixed[]>} A promise which resolves into an array of objects if invalid or true if valid
+   * @private
    */
   async _validateDynamicMultipleChoiceQuestion() {
-    const value = this.get("answer.value");
+    const value = this.answer.value;
 
     if (!value) {
       return true;
@@ -845,45 +812,45 @@ export default Base.extend({
         in: (this.options || []).map(({ slug }) => slug),
       });
     });
-  },
+  }
 
   /**
    * Dummy method for the validation of file uploads.
    *
    * @method _validateFileQuestion
-   * @return {RSVP.Promise}
+   * @return {Boolean} Always returns true
    * @private
    */
   _validateFileQuestion() {
-    return resolve(true);
-  },
+    return true;
+  }
 
   /**
    * Method to validate a date question.
    *
    * @method _validateDateQuestion
    * @return {Object[]|Boolean[]|Mixed[]} Returns per value an object if invalid or true if valid
-   * @internal
+   * @private
    */
   _validateDateQuestion() {
-    return validate("date", this.get("answer.value"), {
+    return validate("date", this.answer.value, {
       allowBlank: true,
     });
-  },
+  }
 
   /**
    * Dummy method for the validation of table fields
    *
    * @method _validateTableQuestion
-   * @return {RSVP.Promise}
+   * @return {Promise<Boolean|Object>} A promise which resolves into an object if invalid or true if valid
    * @private
    */
   async _validateTableQuestion() {
     if (!this.value) return true;
 
-    const rowValidations = await all(
+    const rowValidations = await Promise.all(
       this.value.map(async (row) => {
-        const validFields = await all(
+        const validFields = await Promise.all(
           row.fields.map(async (field) => {
             await field.validate.perform();
 
@@ -902,49 +869,49 @@ export default Base.extend({
         value: null,
       }
     );
-  },
+  }
 
   /**
    * Dummy method for the validation of static fields
    *
    * @method _validateStaticQuestion
-   * @return {RSVP.Promise}
+   * @return {Boolean} Always returns true
    * @private
    */
   _validateStaticQuestion() {
-    return resolve(true);
-  },
+    return true;
+  }
 
   /**
    * Dummy method for the validation of form fields
    *
    * @method _validateFormQuestion
-   * @return {RSVP.Promise}
+   * @return {Boolean} Always returns true
    * @private
    */
   _validateFormQuestion() {
-    return resolve(true);
-  },
+    return true;
+  }
 
   /**
    * Dummy method for the validation of calculated float fields
    *
    * @method _validateCalculatedFloatQuestion
-   * @return {RSVP.Promise}
+   * @return {Boolean} Always returns true
    * @private
    */
   _validateCalculatedFloatQuestion() {
-    return resolve(true);
-  },
+    return true;
+  }
 
   /**
    * Dummy method for the validation of work item button fields
    *
    * @method _validateActionButtonQuestion
-   * @return {RSVP.Promise}
+   * @return {Boolean} Always returns true
    * @private
    */
   _validateActionButtonQuestion() {
-    return resolve(true);
-  },
-});
+    return true;
+  }
+}