diff --git a/example/swagger-files/types.json b/example/swagger-files/types.json
index 33865c119..999c5c6ef 100644
--- a/example/swagger-files/types.json
+++ b/example/swagger-files/types.json
@@ -98,6 +98,12 @@
"type": "string",
"format": "date"
},
+ "string (format: date, with pattern)": {
+ "type": "string",
+ "format": "date",
+ "description": "This accepts a pattern of matching `(\\d{4})-(\\d{2})-(\\d{2})`",
+ "pattern": "(\\d{4})-(\\d{2})-(\\d{2})"
+ },
"string (format: date-time)": {
"description": "Unsupported due to the varying ways that `date-time` is utilized in API definitions for representing dates, the [lack of wide browser support for the input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#Browser_compatibility), and that it's not [RFC 3339](https://tools.ietf.org/html/rfc3339) compliant.",
"type": "string",
diff --git a/packages/api-explorer/__tests__/Params.test.jsx b/packages/api-explorer/__tests__/Params.test.jsx
index 91aa2815c..4dcef042f 100644
--- a/packages/api-explorer/__tests__/Params.test.jsx
+++ b/packages/api-explorer/__tests__/Params.test.jsx
@@ -239,18 +239,27 @@ describe('oneOf/anyOf', () => {
});
describe('schema handling', () => {
- describe('minLength / maxLength', () => {
- it('should put a `minLength` and `maxLength` attribute on an input', () => {
- const params = mount(
-
- );
+ it('should put a `minLength` and `maxLength` attribute on an input', () => {
+ const params = mount(
+
+ );
- expect(params.find('input')).toHaveLength(1);
- expect(params.find('input').props()).toHaveProperty('minLength', 5);
- expect(params.find('input').props()).toHaveProperty('maxLength', 20);
- });
+ expect(params.find('input')).toHaveLength(1);
+ expect(params.find('input').props()).toHaveProperty('minLength', 5);
+ expect(params.find('input').props()).toHaveProperty('maxLength', 20);
+ });
+
+ it('should put a `pattern` on an input', () => {
+ const params = mount(
+
+ );
+
+ expect(params.find('input')).toHaveLength(1);
+ expect(params.find('input').props()).toHaveProperty('pattern', '(\\d{4})-(\\d{2})-(\\d{2})');
});
describe('format', () => {
diff --git a/packages/api-explorer/__tests__/__fixtures__/string/oas.json b/packages/api-explorer/__tests__/__fixtures__/string/oas.json
index 14b1aa57f..4ffa2d28d 100644
--- a/packages/api-explorer/__tests__/__fixtures__/string/oas.json
+++ b/packages/api-explorer/__tests__/__fixtures__/string/oas.json
@@ -125,6 +125,26 @@
}
}
},
+ "/format-string-with-pattern": {
+ "get": {
+ "requestBody": {
+ "content": {
+ "application/json": {
+ "schema": {
+ "type": "object",
+ "properties": {
+ "string pattern": {
+ "type": "string",
+ "format": "date",
+ "pattern": "(\\d{4})-(\\d{2})-(\\d{2})"
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
"/format-unknown": {
"get": {
"requestBody": {
diff --git a/packages/oas-form/src/components/widgets/BaseInput.js b/packages/oas-form/src/components/widgets/BaseInput.js
index 25c217298..03240116d 100644
--- a/packages/oas-form/src/components/widgets/BaseInput.js
+++ b/packages/oas-form/src/components/widgets/BaseInput.js
@@ -65,6 +65,10 @@ function BaseInput(props) {
inputProps.maxLength = schema.maxLength;
}
+ if (typeof schema.pattern !== 'undefined') {
+ inputProps.pattern = schema.pattern;
+ }
+
const _onChange = ({ target: { value } }) => {
return props.onChange(value === '' ? options.emptyValue : value);
};