ngClass：检查输入是否具有角度值

Question

我有一个 angular component 用于 input 和浮动 label。我切换了一个boolean 变量，用于在input 包装器上设置class，以使label 的animation 与angular (blur) 和(focus) 上的input 元素上的浮动(focus)。现在这工作正常，当我单击 input 时，label 动画向上，当我离开 input 时动画向下动画。我唯一的问题是，当我在input 中输入一个值并离开它时，label 应该保持浮动在input 之上。目前，它会向下动画并与value 重叠。例如，我如何检测我的ngClass，如果isFocused 是true 或 label 有一个value，以保持class？

这是我的代码。在stackoverflow sn-p 上，只支持angularjs，所以我无法在这里制作sn-p，抱歉！

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.component.html",
    styleUrls: ["./my-input.component.scss"]
})
export class MyInputComponent implements OnInit {
    isFocused: boolean = false;

    constructor() {}

    ngOnInit() {}
}

Answer 1

试试：

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

Answer 2

首先在您的输入中定义[(ngModel)]。然后尝试使用这种方法添加类。

<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>

或者您可以为浮动标签使用角度材质。查看示例请点击here

Answer 3

要获得条件中的值，只需使用（当然你必须先定义和绑定值：

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

或

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

见https://angular.io/api/common/NgClass