javascript - ngClass: Check if input has value with angular - Stack Overflow

admin管理员组

文章数量:1290964

I've got an angular ponent for an input with a floating label. I toggle a boolean variable for setting the class on the input wrapper to make the floating animation for the label with angular (blur) and (focus) on the input element. Now this works fine, when I click in the input, the label animates up and when I leave the input it animates back down. My only problem is, when I type a value in the input and leave it, the label should stay floated above the input. At the moment, it animates back down and overlapps the value. How can I detect for example in my ngClass, if isFocused is true or the label has a value, to keep the class?

Here is my code. On stackoverflow snippet, there is only angularjs supported, so I was not able to make a snippet here, sry for that!

HTML:

<div class="my-input" [ngClass]="isFocused ? 'state-my-input--active' : ''">
  <div class="my-input__wrapper">
    <label class="my-input__label">Label</label>
    <input type="text" class="my-input__input" (blur)="isFocused = false" (focus)="isFocused = true">
  </div>
</div>

SCSS:

.my-input {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

.my-input__wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
}

.my-input__label {
  bottom: 8px;
  color: blue;
  font-size: 14px;
  position: absolute;
  transition: all 0.3s ease-in-out;
}

.my-input__input {
  border: none;
  border-bottom: 2px solid darkgray;
  color: blue;
  transition: border-color 180ms linear;
}

.state-my-input--active {
  .my-input__wrapper {
    .my-input__label {
      transform: translateY(-15px);
      cursor: default;
    }

    .my-input__input {
      border-bottom-color: blue;
    }
  }
}

JS:

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "my-input",
    templateUrl: "./my-inputponent.html",
    styleUrls: ["./my-inputponent.scss"]
})
export class MyInputComponent implements OnInit {
    isFocused: boolean = false;

    constructor() {}

    ngOnInit() {}
}

I've got an angular ponent for an input with a floating label. I toggle a boolean variable for setting the class on the input wrapper to make the floating animation for the label with angular (blur) and (focus) on the input element. Now this works fine, when I click in the input, the label animates up and when I leave the input it animates back down. My only problem is, when I type a value in the input and leave it, the label should stay floated above the input. At the moment, it animates back down and overlapps the value. How can I detect for example in my ngClass, if isFocused is true or the label has a value, to keep the class?

Here is my code. On stackoverflow snippet, there is only angularjs supported, so I was not able to make a snippet here, sry for that!

HTML:

<div class="my-input" [ngClass]="isFocused ? 'state-my-input--active' : ''">
  <div class="my-input__wrapper">
    <label class="my-input__label">Label</label>
    <input type="text" class="my-input__input" (blur)="isFocused = false" (focus)="isFocused = true">
  </div>
</div>

SCSS:

.my-input {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

.my-input__wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
}

.my-input__label {
  bottom: 8px;
  color: blue;
  font-size: 14px;
  position: absolute;
  transition: all 0.3s ease-in-out;
}

.my-input__input {
  border: none;
  border-bottom: 2px solid darkgray;
  color: blue;
  transition: border-color 180ms linear;
}

.state-my-input--active {
  .my-input__wrapper {
    .my-input__label {
      transform: translateY(-15px);
      cursor: default;
    }

    .my-input__input {
      border-bottom-color: blue;
    }
  }
}

JS:

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "my-input",
    templateUrl: "./my-input.ponent.html",
    styleUrls: ["./my-input.ponent.scss"]
})
export class MyInputComponent implements OnInit {
    isFocused: boolean = false;

    constructor() {}

    ngOnInit() {}
}

• javascript
• html
• css
• angular
• input

Share Improve this question Follow asked Dec 3, 2018 at 9:50 webta.st.icwebta.st.ic 5,17988 gold badges5454 silver badges107107 bronze badges 5

• Try instead with [class.state-my-input--active]="isFocused" – user4676340 Commented Dec 3, 2018 at 9:52
• If label has a value Or Input has a value u mean ? – SeleM Commented Dec 3, 2018 at 9:53
• @selemmn If input has a value – webta.st.ic Commented Dec 3, 2018 at 12:07
• @MrBuggy u had already an answer.. – SeleM Commented Dec 3, 2018 at 13:27
• @selemmn Yes, saw it. I found a solution based on one of the anwers! thx – webta.st.ic Commented Dec 3, 2018 at 15:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Try:

[ngClass]="{'state-my-input--active': isFocused}"

first define [(ngModel)] in your input. then try to add class by using this approach.

<div class="my-input" [ngClass]="{'state-my-input--active': isFocused || someValue}">
  <div class="my-input__wrapper">
    <label class="my-input__label">Label</label>
    <input type="text" class="my-input__input" [(ngModel)]="someValue" (blur)="isFocused = false" (focus)="isFocused = true">
  </div>
</div>

or you can use angular material for floating labels.to see examples click here

To also get the value in your condition simply use (of course you has to define and bind value first:

[ngClass]="{'state-my-input--active': isFocused || value != ''}"

or

[class.state-my-input--active]="isFocused || value != ''"

see https://angular.io/api/mon/NgClass

本文标签： javascriptngClass Check if input has value with angularStack Overflow