Merge pull request #55 from open-formulieren/feature/4546-soft-requir…

…ed-validation

Soft required validation

src/formio/components/file.ts

@@ -79,7 +79,7 @@ export interface FileUploadConfiguration {
 export interface BaseFileComponentSchema
  extends Omit<StrictComponentSchema<FileUploadData[]>, UnusedFileProperties | 'errors'>,
  DisplayConfig,
- Omit<OFExtensions<TranslatableKeys>, 'registration'>,
+ Omit<OFExtensions<TranslatableKeys, {softRequired?: boolean}>, 'registration'>,
  HasValidation<Validator> {
  validate?: OFValidateOptions<Validator>;
  type: 'file';

src/formio/components/index.ts

@@ -30,3 +30,4 @@ export * from './password';
 export * from './content';
 export * from './columns';
 export * from './fieldset';
+export * from './softRequiredErrors';

src/formio/components/softRequiredErrors.ts

@@ -0,0 +1,45 @@
+import {LayoutComponentSchema, OFExtensions} from '..';
+
+type TranslatableKeys = 'html';
+
+/**
+ * The softRequiredErrors component schema. It's a variation on the WYSIWYG content
+ * component.
+ *
+ * Any validation errors related to soft-required fields (the fields are required but
+ * don't block progressing in the form and are therefore mostly informational/warnings)
+ * are displayed here. The form designer can control the body text, and the SDK will
+ * then interpolate the actual field labels that violate the requirement(s). If there
+ * are no errors, the component is not to be displayed.
+ *
+ * @group Form.io components
+ * @category Concrete types
+ */
+export interface SoftRequiredErrorsComponentSchema
+ extends Omit<
+ LayoutComponentSchema<never>,
+ | 'conditional'
+ | 'tooltip'
+ | 'multiple'
+ | 'defaultValue'
+ | 'clearOnHide'
+ | 'validate'
+ | 'errors'
+ | 'description'
+ | 'hidden'
+ | 'hideLabel'
+ | 'disabled'
+ | 'widget'
+ | 'validateOn'
+ | 'placeholder'
+ >,
+ Omit<OFExtensions<TranslatableKeys>, 'registration' | 'isSensitiveData'> {
+ id: string;
+ key: string;
+ type: 'softRequiredErrors';
+ /**
+ * Even though the label is present, it is typically not displayed anywhere.
+ */
+ html: string;
+ label?: string;
+}

src/formio/index.ts

@@ -26,6 +26,7 @@ import {
  SelectComponentSchema,
  SelectboxesComponentSchema,
  SignatureComponentSchema,
+ SoftRequiredErrorsComponentSchema,
  TextFieldComponentSchema,
  TextareaComponentSchema,
  TimeComponentSchema,
@@ -85,6 +86,7 @@ export type AnyComponentSchema =
  | ContentComponentSchema
  | ColumnsComponentSchema
  | FieldsetComponentSchema
+ | SoftRequiredErrorsComponentSchema
  // deprecated
  | PostcodeComponentSchema
  | PasswordComponentSchema

test-d/formio/components/file.test-d.ts

@@ -215,8 +215,9 @@ expectAssignable<FileComponentSchema>({
  docVertrouwelijkheidaanduiding: 'openbaar',
  titel: '',
  },
- // translations tab in builder form
+ // (mostly) translations tab in builder form
  openForms: {
+ softRequired: true,
  translations: {
  nl: {
  label: 'Bestand toevoegen',

test-d/formio/components/softRequiredErrors.test-d.ts

@@ -0,0 +1,28 @@
+import {expectAssignable} from 'tsd';
+
+import {SoftRequiredErrorsComponentSchema} from '../../../lib';
+
+// Minimal schema
+expectAssignable<SoftRequiredErrorsComponentSchema>({
+ type: 'softRequiredErrors',
+ id: 'iitral8',
+ key: 'someKey',
+ label: 'Ignored',
+ html: '<div>Will need to be properly {{ field_errors }} structured.</div>',
+});
+
+// With translations
+expectAssignable<SoftRequiredErrorsComponentSchema>({
+ type: 'softRequiredErrors',
+ id: 'iitral8',
+ key: 'someKey',
+ label: 'Ignored',
+ html: '<div>Will need to be properly {{ field_errors }} structured.</div>',
+ openForms: {
+ translations: {
+ nl: {
+ html: '<div>NL translation</div>',
+ },
+ },
+ },
+});