Rails, Angular, Postgres, and Bootstrap, 2nd Edition

Customizing the Component’s Behavior and Appearance

There are many ways to address the odd rendering of the error message on the state field as well as add support for pattern-based validation. We’ll address this using what we already know.

Because our component can’t easily tell how big it will be when rendered, it can’t automatically fix the error message rendering issue. While you could use some custom CSS to make it look okay, let’s create a first-class feature of our component called “compact.” The user of our component will know if it’s going to be rendered in a small space. When we set compact on our component, we’ll omit the message entirely and instead render the text field in red when there’s an error. Our browser’s built-in tooltip ...