Form for real-time custom verification

Form Conduct real-time custom verification

After selecting a company , Interface , Verify in real time whether the company can join

<Form ref={form => this.form = form} initialValues={form}>
    <FormRow styleName='shop'>
        <FormElement width={550} label=" Add a shared company " >
            <Form.List name="companyInfo">
                {(fields, { add, remove }) => (
                    <>
                        {fields.map(({ key, name, fieldKey }) => (
                            <div key={key} style={
        {
         display: 'flex' }} align="baseline">
                                <Form.Item
                                    name={[name, 'companyId']}
                                    fieldKey={[fieldKey, 'fieldKey']}
                                    rules={[
                                        { required: true, message: " Please add a sharing company " },
                                        () => ({
                                            async validator(_, value) {
                                                if (value === undefined) {
                                                    return
                                                }
                                                const d = { companyId: value }  // Change the structure 
                                                if (JSON.stringify(oldData).indexOf(JSON.stringify(d)) !== -1) {
                                                    return
                                                } else {
                                                    await that.props.ajax.get('/admin/platformCompanyShareConfig/searchByCompanyId', { companyId: value?.value, type: 1 }).then(res => {
                                                        if (res.data?.companyInfo !== null) {
                                                            return Promise.reject(new Error(' The company has joined other sharing , Unable to join '));
                                                        } else {
                                                            return Promise.resolve();
                                                        }
                                                    })
                                                    return Promise.resolve();
                                                }
                                            },
                                        }),
                                    ]}
                                >
                                    <Select
                                        showSearch
                                        placeholder=" Please enter the company name and select "
                                        onSearch={this.onSearch}
                                        defaultActiveFirstOption={false}
                                        showArrow={false}
                                        filterOption={false}
                                        labelInValue={true}
                                        disabled={type === "check" ? true : false}
                                        style={
   { width: 400 }}
                                    >
                                        {
                                            options?.map(item => <Option value={item.id}>{item.companyName}</Option>)
                                        }
                                    </Select>
                                </Form.Item>
                                {
                                    fields.length === 1 || type == 'check' ?
                                        <div styleName="buttonContent">{type !== "check" ? <PlusCircleOutlined styleName="dynamic-button" onClick={() => add()} /> : null} </div>
                                        : fields.length !== name + 1 ?
                                            <div styleName="buttonContent"><MinusCircleOutlined styleName="dynamic-button" onClick={() => remove(name)} /></div>
                                            : fields.length === name + 1 ?
                                                <div styleName="buttonContent">
                                                    <PlusCircleOutlined styleName="dynamic-button" onClick={() => add()} />
                                                    <MinusCircleOutlined styleName="dynamic-button" onClick={() => remove(name)} />
                                                </div>
                                                : null
                                }
                            </div>
                        )
                        )}
                    </>
                )
                }
            </Form.List>
        </FormElement>
    </FormRow>
</Form>