Question

我有一个angular的{{1}} component和一个浮动input。我切换了一个label变量，以在boolean包装器上设置class，用input {{1为animation浮动label }}和angular上的(blur)。现在，这很好用，当我单击(focus)时，input动画了，而当我离开input时，动画又向下了。我唯一的问题是，当我在label中键入一个值并将其保留时，input应该保持浮于input之上。此刻，它向下动画并与label重叠。例如，如果input是value 或，ngClass有一个isFocused，我该如何检测自己的true label？

这是我的代码。在stackoverflow片段中，仅支持value，因此我无法在此处创建片段，对此表示抱歉！

HTML：

class

SCSS：

angularjs

JS：

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

Answer 1

尝试：

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

Answer 2

要获得条件下的值，只需使用（当然，您必须先定义并绑定值：

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

或

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

请参阅https://angular.io/api/common/NgClass

Answer 3

首先在输入中定义[(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

ngClass：检查输入的值是否为angular

3 个答案: