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>