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

最简单的方法是使用模板引用变量（有关使用指令执行此操作的方法，请参阅我的其他答案）：

使用 #myInput 属性在输入元素上定义模板参考变量
```
<input type="text" #myInput>
```
使用 [class.active] =“myInput.value”定义条件类属性绑定，条件为 #myInput 元素的值：
```
<label [class.active]="myInput.value"  for="FirstName" >First Name</label>
```
在元素上定义（keyup）或（更改）模拟事件处理程序，以触发Angular更改检测。
- “更改”事件会激活元素模糊事件上的类，而（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>

Answer 3

您可以创建指令并注入 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 4

实际上有一个更简单的，内置的Angular指令 [class.className] （参见我之前的回答），但是如果你坚持用指令完成这个，那么这就是我要做的它：

这是您的指令 makeactive.directive.ts （不要忘记将其作为声明添加到app.module.ts文件中）：

import {Directive, ElementRef, Input, Renderer2} from '@angular/core';

@Directive({
    selector: '[makeActive]'
})
export class ActiveDirective
{
    input;

    @Input() set makeActive(input) {
        this.input = input;
    }

    ngDoCheck() {
        let fn = (this.input && this.input.value) ? 'addClass' : 'removeClass';
        this.renderer[fn](this.el.nativeElement, 'active');
    }

    constructor(private el: ElementRef, private renderer: Renderer2) {}
}

在模板 app.component.html 中，您需要将指令属性添加到要将类应用到的元素（<label>元素）：

<label [makeActive]="myInput">First Name</label>
然后您需要在文本输入上声明模板引用变量：

<input type="text" #myInput>
您还需要注册它的“keyup”或“change”事件以触发Angular变化检测（无论是模糊还是按键，如我之前的回答所示）：

<input type="text" #myInput (keyup)="true">

完整的模板代码：

<div class="md-form">
  <input type="text" #myInput (keyup)="true">
  <label [makeActive]="myInput">First Name</label>
</div>

Answer 5

您可以对this answer创建的ngClass使用plunker。

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

Answer 6

正如其他人在这里提到的那样，对于这么小的事情，你真的不需要单独的指令，但是如果你想要这样的话......好吧，这就是。

<强>更新

实际上，它可以做得更简单。我已经更新了代码。

<强> app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {AppMdbInputInitDirective} from './app-mdb-input-init.directive';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
    declarations: [
        AppComponent,
        AppMdbInputInitDirective
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

<强> app.component.ts

import {Component} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    formGroup: FormGroup;
    activeFlag$: Observable<boolean>;
    constructor(fb: FormBuilder) {
        this.formGroup = fb.group({
            firstName: fb.control('')
        });
        this.activeFlag$ = this.formGroup.get('firstName').valueChanges.map(v => !!v);
    }
}

<强> app.component.css

.active {
    color: red;
}

<强> app.component.html

<div class="md-form" [formGroup]="formGroup">
    <input type="text" name="" id="FirstName" class="form-control" formControlName="firstName">
    <label for="FirstName" [appMdbInputInit]="activeFlag$ | async" labelClassName="active">First Name</label>
</div>

最后，最有趣的部分 - app-mdb-input-init.directive.ts

import {Directive, ElementRef, Input, Renderer2} from '@angular/core';

@Directive({
    selector: '[appMdbInputInit]'
})
export class AppMdbInputInitDirective {

    @Input()
    labelClassName: string;

    @Input()
    set appMdbInputInit(val: boolean) {
        if (val) {
            this.renderer.addClass(this.elementRef.nativeElement, this.labelClassName);
        } else {
            this.renderer.removeClass(this.elementRef.nativeElement, this.labelClassName);
        }
    }

    constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    }

}

如何添加＆＃34; Active＆＃34;输入字段不为空时的类

6 个答案: