Merge pull request #344 from kubeshop/mm/fix/formlistduplicates

fix: form list duplicated values

Author: mortada-codes

src/components/FormComponents/FormList/FormList.tsx

@@ -3,6 +3,8 @@ import {NamePath} from 'antd/lib/form/interface';
 
 import {DeleteOutlined} from '@ant-design/icons';
 
+import _ from 'lodash';
+
 import * as S from './styled';
 
 interface IProps {
@@ -19,18 +21,36 @@ const FormList: React.FC<IProps> = props => {
 
   return (
     <Form.Item label={label} required={Boolean(requiredMessage)}>
-      <Form.List name={name} initialValue={initialValue}>
-        {(fields, {add, remove}) => (
+      <Form.List
+        name={name}
+        initialValue={initialValue}
+        rules={[
+          {
+            validator(arg, value: string[]) {
+              if (_.uniq(value).length === value.length) {
+                return Promise.resolve();
+              }
+              return Promise.reject(Error('Duplicated items'));
+            },
+          },
+        ]}
+      >
+        {(fields, {add, remove}, {errors}) => (
           <>
             {fields.map(field => (
               <S.Space key={field.key} align="baseline">
-                <Form.Item {...field} rules={[{required: true, whitespace: true, message: requiredMessage}]}>
+                <Form.Item
+                  {...field}
+                  validateTrigger={['onChange', 'onBlur']}
+                  rules={[{required: true, whitespace: true, message: requiredMessage}]}
+                >
                   <S.Input placeholder={placeholder} />
                 </Form.Item>
 
                 <DeleteOutlined onClick={() => remove(field.name)} />
               </S.Space>
             ))}
+            <Form.ErrorList errors={errors} />
             <S.ButtonContainer>
               <Form.Item>
                 <Button type="default" onClick={() => add('', 0)}>