如何在输入字段为空时添加"活动"类

Question

我正在尝试创建一个Angular 4指令,class="active"当文本字段不为空时,该指令将添加到标签上

<div class="md-form">
    <input appMdbInputInit type="text" name="" id="FirstName" 
         class="form-control"   formControlName="firstName">
    <label  for="FirstName" >First Name</label>
 </div>

当textfield不为空时我期望的结果

 <div class="md-form">
    <input  appMdbInputInit  type="text" name="" id="FirstName" 
         class="form-control"   formControlName="firstName">
    <label class="Active"  for="FirstName" >First Name</label>
 </div>

我怎样才能做到这一点 ？

非常感谢

Answer 1

您不需要任何自定义指令来执行此操作.例:

  <form [formGroup]="group">
    <input appMdbInputInit type="text" name="" id="FirstName" 
       class="form-control" formControlName="firstName">
    <label [class.Active]="group.get('firstName').value.length" for="FirstName">First Name</label>
  </form>

演示:http://plnkr.co/edit/SUmIVCaWnJzjU7j0XHwj？p = preview

Answer 2

您可以创建指令并注入FormControlName实例来监听值的变化。并在值更改时添加或删除标签活动类。

指示

import { Directive, OnInit, OnDestroy, ElementRef } from '@angular/core';
import { FormControlName } from '@angular/forms';

import { Subscription } from 'rxjs/Subscription';

@Directive({
    selector: '[setLabelActive]'
})
export class SetLabelActiveDirective implements OnDestroy {

    valueSub: Subscription; 

    constructor(
        private el: ElementRef,
        private formControlName: FormControlName // Inject FormControlName
    ) {

    }

    ngOnInit() {
        // Listen value changes
        this.valueSub = this.formControlName.valueChanges.subscribe(value => {

            // Get label
            const inputId = this.el.nativeElement.getAttribute('id'),
                label = document.querySelector(`label[for="${inputId}"]`);

            // Toggle `active` class
            if (label) {
                label.classList.toggle('active', value);
            }
        });
    }

    ngOnDestroy() {
        // Unlisten value changes
        this.valueSub.unsubscribe();
    }

}

用法

<form [formGroup]="myForm">

    <div>
        <input setLabelActive type="text" id="FirstName" formControlName="firstName">
        <label for="FirstName">First Name</label>
    </div>

</form>

Answer 3

最简单的方法是使用模板引用变量(有关使用指令执行此操作的方法,请参阅我的其他答案):

1. 使用#myInput属性在input元素上定义模板引用变量

   <input type="text" #myInput>
   

2. 使用[class.active] ="myInput.value"定义条件类属性绑定,条件是#myInput元素的值:

   <label [class.active]="myInput.value"  for="FirstName" >First Name</label>
   

3. 在元素上定义(keyup)或(更改)模拟事件处理程序以触发Angular更改检测.

   • "change"事件将激活元素模糊事件上的类,而(keyup)将在键上启用它.根据您的需要选择哪一个:

你去吧!

完整示例代码:

 <div class="md-form">
    <input type="text" #myInput (keyup)="true"
         class="form-control"   formControlName="firstName">
    <label [class.active]="myInput.value"  for="FirstName" >First Name</label>
 </div>