Farbe der Tag-Eingabe dynamisch ändern angular2

Ich möchte eine Einladungs-E-Mail von der Benutzeroberfläche an die Benutzer senden. Ich muss mehrere E-Mail-IDs der Benutzer eingeben, die nicht bereits Teil unseres Systems sind. Ich benutze die Tag-Eingabe von angular2 dafür. Alles funktioniert gut bis auf eine Validierung. Nachdem ich die E-Mail eingegeben habe, überprüfe ich, ob der Benutzer bereits im System vorhanden ist oder nicht. Wenn der Benutzer vorhanden ist, möchte ich das E-Mail-Tag als rot markieren. Am Ende sollten alle E-Mails, die bereits im System vorhanden sind, eine rote Farbe für ihre Tags haben.Farbe der Tag-Eingabe dynamisch ändern angular2

Folgende ist meine Komponente:

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; 
    } 
    }

Im Folgenden finden Sie HTML-Code:

<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>

Quelle

2017-01-03 Nilakshi Naphade

Nachdem Sie sich Ihre anderen Fragen angesehen haben, handelt es sich nicht um eine Website, auf der Sie generische Probleme mit Ihrer Anwendung haben und die Leute dazu bringen, den Rest daraus aufzubauen. Von Ihren anderen Fragen scheint es, dass die meisten, wenn nicht alle der Informationen, die Sie danach haben, in Blogs und anderen SO-Posts verfügbar sind. – Rambatino

Sie die [divideColor] Eigenschaft verwenden, können Farbe

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

dynamisch diese dynamisch wird eingestellt Ändern Sie die Farbe des Feldes von der Grundfarbe

01 in Rot

Quelle

2017-03-17 20:05:42

Farbe der Tag-Eingabe dynamisch ändern angular2

Antwort

Verwandte Themen