CODEWITHSUNDEEP
angular
Rajesh M P
Rajesh M P

Reputation: 497

Angular multiple input field with remove options

User will be able to add multiple emails, after entering the email, will add to a list and user will be able to remove from the list. enter image description here

Upvotes: 1

Views: 285

Answers (1)

Exception
Exception

Reputation: 592

In HTML page

<div class="parent-div">
      <mat-form-field class="example-full-width" appearance="fill">
          <mat-label>EMail</mat-label>
          <textarea matInput placeholder="Enter email" [(ngModel)]="email"
           (keyup.enter)="validateEmail()"> 
          </textarea>
      </mat-form-field>
     <div *ngFor="let email of emails" class="email-div">
         <mat-icon (click)="onDelete(email)">close</mat-icon>
         <span>{{email}}</span>
     <div>
</div>

In TS file

Declare email variable and email array and implement validation function

//declaration
email: string = "";
emailArray: string[] = [];
//validation method
validateEmail() {
//do email validation here
//if it is valid email push email to emailArray
  if(validEmail) {
     this.emailArray.push(email);
     this.email ="";
  }else{
   //show error
   }
}
onDelete(email){
 var index = this.emailArray.findIndex((x)=> x=== email);
 if(index>-1){
    this.emailArray.splice(index, 1);
 }
}

Upvotes: 1

Related Questions