In our mock layout, we identified that we wanted our validation to appear below the Save and Clear buttons. While we could do this inside our main component, we are going to separate our validation out into a separate validation component. The component will receive the current state of our main component, apply the validation whenever the state changes, and return whether we can save our data.
In a similar way to how we created our PersonalDetails component, we are going to create properties to pass into our component:
interface IValidationProps {
CurrentState : IPersonState;
CanSave : (canSave : boolean) => void;
}
We are going to create a component in FormValidation.tsx, that will apply the different IValidation classes that we have just created. The constructor simply adds the different validators into an array that we will shortly...