0

我想从 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>
4

1 回答 1

0

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

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

这会将字段的颜色从默认原色动态更改为红色

于 2017-03-17T20:05:42.940 回答