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