angular - 输入字段不为空时如何添加 "Active"类

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>

当文本字段不为空时我期望的结果

 <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