in src/components/base/form/form_fields/form_fields.stories.js [18:59]
data() {
return {
// why: We declare fields here so that we can test what binding the
// "confirmPassword" validator to "this.formValues" would act
// like. In most cases, these can be constant and injected through
// `$options`.
fields: {
USERNAME: {
label: 'NAME (ALL CAPS)',
mapValue: (x) => x?.toUpperCase(),
validators: [required('NAME IS REQUIRED!!!')],
},
password: {
label: 'Password with group styling',
inputAttrs: { type: 'password' },
groupAttrs: { class: 'gl-bg-purple-50 gl-w-20' },
validators: [required('Password is required')],
},
confirmPassword: {
label: 'Confirm Password',
inputAttrs: { type: 'password' },
validators: [
required('Confirmed password is required'),
(confirmValue) =>
confirmValue !== this.formValues.password ? 'Must match password' : '',
],
},
custom: {
label: 'Custom input',
mapValue: mapToNumber,
validators: [(val) => (val < 1 ? 'Please click this at least once :)' : '')],
},
favoriteItem: {
label: 'Favorite Item (Optional)',
},
},
formValues: {},
testFormId: uniqueId('form_fields_story_'),
serverValidations: {},
loading: false,
};
},