Assigning a class to an element based on the condition of another element within a directive's template

Question

Assigning a class to an element based on the condition of another element within a directive's template

My goal is to create a directive that incorporates a label and a text input field. The main requirement is for the label to be visible only when the input field is in focus or contains text. Below is the current code I am working with, which I aim to convert into a reusable directive for other fields.

<label class="text-field-top-label"></label>
<input  type="email"
        name="email"
        ng-model="user.email"
        ng-model-options="{updateOn: 'blur'}"
        required
        placeholder="Email address"/>

I am facing difficulty in this task because I cannot directly target the label or text field without assigning them specific IDs, which goes against my intention of creating a flexible directive. If you have any insights or suggestions on how to tackle this issue, I would greatly appreciate it.

html css angularjs dom

Answer 1

Answer №1

Here is my unique solution for this issue: I utilized a mix of CSS and Vue.js to tackle the problem. First, I hid the label by setting its display property to none and then applied the following CSS styles:

&:focus::-webkit-input-placeholder { color:transparent; }
&:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
&:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
&:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
&:focus + label {
  display: inline-block;
}

After that, in the HTML section, I included the following code snippet:

<input type="text"
       id="username"
       v-model="user.username"
       placeholder="Enter your username"/>
<label class="input-label"></label>

This piece of code hides the placeholder when the input is focused and displays the label above the input field. To fulfill the second requirement of displaying the label if the field has a value, I checked the model using Vue.js. The condition checks whether the field exists, has a value other than an empty string, and doesn't have any validation errors apart from "required". This way, the label only shows up when all conditions are met.

Answer 2

Here is my unique solution for this issue: I utilized a mix of CSS and Vue.js to tackle the problem. First, I hid the label by setting its display property to none and then applied the following CSS styles:

&:focus::-webkit-input-placeholder { color:transparent; }
&:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
&:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
&:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
&:focus + label {
  display: inline-block;
}

After that, in the HTML section, I included the following code snippet:

<input type="text"
       id="username"
       v-model="user.username"
       placeholder="Enter your username"/>
<label class="input-label"></label>

This piece of code hides the placeholder when the input is focused and displays the label above the input field. To fulfill the second requirement of displaying the label if the field has a value, I checked the model using Vue.js. The condition checks whether the field exists, has a value other than an empty string, and doesn't have any validation errors apart from "required". This way, the label only shows up when all conditions are met.

Assigning a class to an element based on the condition of another element within a directive's template

Answer №1

Similar questions

Clickable image in HTML that sends a request to an ActionResult

Adjusting the height of the v-footer

Creating PDFs with html2fpdf using the power of PHP, jQuery,

Adjusting the color of a Bootstrap card's header

Showcasing images in Flask

Flashing text compatibility across all browsers

Ways to utilize jquery script within a react component

I'm attempting to implement a mode rewrite rule in Wordpress, but it doesn't seem to be working as expected

The use of event.returnValue is outdated and no longer supported. It is recommended to use the standard event.preventDefault() method instead. You may encounter

Fixed top bar and navigation menu, with a body that can be scrolled

Setting the height to "auto" will take precedence over any other

Unable to select the uib-tabs element link with Protractor

The alignment of Bootstrap 4 cards is not coming together as expected

Best practices for aligning elements within a flex container

The $http patch request is failing to transmit data to the server

Protractor tests encounter issues when working with Select2 within a modal in Angular

designing a parallax footer that stays hidden under the surface?

"Learn the art of combining an ajax request with a captivating background animation at the same time

Guide to adding a new font to your Ember project

The fixed navbar in Bootstrap is missing a bottom margin