Question

我想从UI向用户发送邀请电子邮件。我需要输入那些尚未加入我们系统的用户的多个电子邮件ID。我正在使用angular2的标签输入。除了一些验证，一切都工作正常。输入电子邮件后，我正在检查用户是否已经存在于系统中。如果用户存在，那么我希望该电子邮件标签突出显示为红色。因此，最后系统中已存在的所有电子邮件都应该为其标签添加红色。

以下是我的组成部分：

  public validateEmail(item: any): string {
    if(item.includes("@") && item.includes(".")) {
      return `${item}`;
    }
  }

  public onAdd(item: any) {
    this.userService.getUserByEmail(item).then(
      (response: any) => {
        this.users = response;
        if(this.users.length === 0) {
          this.canSend = true;
          this.emails.push(item);
        } else {
          this.errorItem = item;
          this.isError = true
          this.canSend = false;  
        }
      }
    ).catch(
      (error: any) => console.log(error)
    )    
  }

  public onRemove(item: any) {
    let index = this.emails.indexOf(item);
    this.emails.splice(index, 1);
    if(item === this.errorItem)
    {
      this.isError = false;
      this.errorItem = ""
      this.canSend = true;
    }
  }

以下是HTML代码：

<md-card class="default-card">
  <h2>{{ 'invitation' | translate}}</h2>
</md-card>

<md-card class="default-card">
  <div>
    <md-hint class="error-hint">
      <span *ngIf = "isError">{{'Please remove email: ' | translate}}{{errorItem}}</span>
    </md-hint>
    <tag-input [ngModel]="emails"
               separatorKeys="[32]"
               (onRemove)="onRemove($event)"
                 (onAdd)="onAdd($event)"
               [transform]="validateEmail"
               [secondaryPlaceholder] ="('Enter email ids' | translate)"
               [placeholder]="('+ Email')">
    </tag-input>
  </div>
</md-card>
<div class="send-invite-wrapper">
  <div class="fill-send-invite"></div>
  <button md-raised-button color="primary" class="save" [disabled] = "!canSend || isError"
          (click)="sendInvite()">{{'send invitation' | translate}}
  </button>
</div>

Answer 1

您可以使用[divideColor]属性动态设置颜色

<md-input-container [dividerColor] =(!yourform.controls['fieldname'].valid && yourform.controls['fieldname'].touched) ? 'warn' : 'primary'">
    <input mdInput placeholder="fieldname >
</md-input-container>

这将动态地将字段的颜色从默认原色

更改为红色

改变标签输入的颜色动态angular2

1 个答案: