Изменение цвета тега-входа динамически угловое2

Я хочу отправить приглашение электронной почты пользователям из пользовательского интерфейса. Мне нужно ввести несколько идентификаторов электронной почты тех пользователей, которые еще не являются частью нашей системы. Я использую для него tag-input angular2. Все работает отлично, за исключением некоторой проверки. После ввода электронной почты я проверяю, существует ли пользователь в системе или нет. Если пользователь существует, то я хочу, чтобы этот тег электронной почты был выделен красным цветом. Поэтому в конце все электронные письма, которые уже присутствуют в системе, должны иметь красный цвет для своих тегов.Изменение цвета тега-входа динамически угловое2

Ниже мой компонент:

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

Изменение цвета тега-входа динамически угловое2

ответ

Смежные вопросы