const [application, setApplication] = useState([])
const [app, setApp] = useState([
{
id: null,
code: null,
name: null
}
]);
useEffect(() => {
let ignore = false;
(async function load() {
let response = await getAllData();
if (!ignore) setApplication(response['data'])
})()
return () => ignore = true;
},[]);
{
label: (
<div className="flex items-center">
<label className="flex-1">Application</label>
<div className="text-right">
<ButtonGroup>
<IconButton icon={<Icon icon="plus" />} onClick={() => appendApp()} />
<IconButton onClick={() => removeApp()} size="md" icon={<Icon icon="minus" />} style={{ display: app.length > 1 ? 'inline-block' : 'none' }} />
</ButtonGroup>
</div>
</div>
),
name: 'applications',
renderer: (data) => {
const { control, register, errors } = useFormContext();
return (
<div className="flex flex-col w-full">
{
app.map((item, index) => (
<div key={index} className="flex flex-col pb-2 -items-center">
<div className="flex pb-2 w-full">
<SelectPicker
placeholder="Select Application"
data={application['data']}
labelKey="name"
valueKey="code"
style={{ width: '100%' }}
disabledItemValues={Array.isArray(control.getValues()['applications']) ? control.getValues()['applications'].map(x => x.id) : []}
onChange={(value) => control.setValue('applications', _setApp(value, index, 'code'))}
value={control.getValues()['applications']?.code}
/>
</div>
</div>
))
}
</div>
)
}
const appendApp = () => {
let i = 0;
for (i = 0; i < noOfApp; i++) {
setApp(arr => [...arr, {
id: null,
code: null,
name: null,
role: null
}]);
return app;
}
}
const removeAppRole = () => {
setApp([...app.slice(0, -1)]);
}
const _setApp = (value, idx, status) => {
app[idx][status] = value;
setApp(app);
return app;
}
如何在选择上添加验证?for example when the select field is empty it should validation that it is required to select. 也例如当有这样的现有数据时:
data = [{
id: 1,
name: 'IOS',
code: 'ios'
}]
以及如何在选择字段上显示这些数据?因为我有一个创建和编辑。当我尝试编辑它不显示值。