動態改變標籤輸入的顏色angular2

我想從用戶界面向用戶發送邀請郵件。我需要輸入多個不屬於我們系統的用戶的多個電子郵件ID。我正在使用angular2的標籤輸入。除了一些驗證外，一切工作都很好。輸入電子郵件後，我正在檢查用戶是否已經存在於系統中。如果用戶存在，那麼我希望該電子郵件標籤突出顯示爲紅色。因此，最後所有已經存在於系統中的電子郵件都應該使用紅色標記。動態改變標籤輸入的顏色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>

來源

2017-01-03 Nilakshi Naphade

看過您的其他問題後，這不是一個網站，您的應用程序中存在一般問題，並且您可以讓人員構建其餘部分。從你的其他問題來看，似乎大部分（如果不是全部的話）你的信息可以在博客和其他SO帖子中找到。 – Rambatino

您可以使用[divideColor]屬性來設置顏色動態

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

此動態會將字段的顏色從默認原色改爲紅色

來源

2017-03-17 20:05:42

動態改變標籤輸入的顏色angular2

回答

相關問題