In our forms, we will have many inputs with the same markup and functionalities. This is the perfect occasion to make another generic and reusable component. It will have a small template with mainly an <input> element and will be able to show the user that it is invalid with a red border:
- Start by creating a new FormInput.vue component with the following props:
- name is the HTML name of the input, needed for the browser autocompletion to work.
- type will be 'text' by default, but we will need to set 'password' eventually.
- value is the current value of the input.
- placeholder is the label displayed inside the input.
- invalid is a Boolean to toggle the invalid display (the red border). It will default to false.
The script ...
