In this article, we will customize the input box components, support NgModel and Reactive Forms, support validation of custom message reminders, support for floating labels, support for custom theme colors, etc.
1. The first step is also to add an input folder, add the corresponding files as follows:
2. Define the input and output of the input component:
3. Realize ControlValueAccessor and support NgModel and Reactive forms:
4. Realize the floating effect of label and the theme color matching system:
5. Write a sample as follows:
Github address: github.com/KevinZhang1…
Online Demo address: stackblitz.com/edit/x-inpu…