use watch on initial form field

This commit is contained in:
jenny-s51 2021-01-28 14:16:11 -05:00
parent c1305e1e16
commit d9e918a4e0

View file

@ -34,7 +34,7 @@ type RoleAttributesProps = {
}; };
export const RoleAttributes = ({ export const RoleAttributes = ({
form: { handleSubmit, register, formState, errors }, form: { handleSubmit, register, formState, errors, watch },
save, save,
array: { fields, append, remove }, array: { fields, append, remove },
reset, reset,
@ -42,6 +42,7 @@ export const RoleAttributes = ({
const { t } = useTranslation("roles"); const { t } = useTranslation("roles");
const columns = ["Key", "Value"]; const columns = ["Key", "Value"];
const watchFirstKey = watch("attributes[0].key");
return ( return (
<> <>
@ -141,11 +142,7 @@ export const RoleAttributes = ({
</Tbody> </Tbody>
</TableComposable> </TableComposable>
<ActionGroup className="kc-role-attributes__action-group"> <ActionGroup className="kc-role-attributes__action-group">
<Button <Button variant="primary" type="submit" isDisabled={!watchFirstKey}>
variant="primary"
type="submit"
isDisabled={!formState.isValid}
>
{t("common:save")} {t("common:save")}
</Button> </Button>
<Button onClick={reset} variant="link"> <Button onClick={reset} variant="link">