как проверить пользовательский ввод в угловых?

Question

Привет, у меня есть задание на угловом уровне, чтобы динамически добавлять несколько навыков и проверять их на отсутствие повторного навыка.

Я закончил с добавлением новых строк для навыков и проверкой валидации, но не смог сделать ниже вещей

1) Как выделить те же навыки ) Прекратить добавление таких же навыков пользователем

Components.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-skills',
  templateUrl: './template.html',
  //styleUrls: ['./about.component.css']
})
export class SkillsComponent implements OnInit {
    skillArr : any;
    addedSkillArr = [];
    constructor() { }


    ngOnInit() {
        this.skillArr =[1];
    }

    addNewRow = function(){
      var maxValue = 0;
      maxValue = Math.max.apply(null, this.skillArr);
      this.skillArr.push(maxValue+1);
    }

    deleteRow = function(value){
      var index = 0;
      index = this.skillArr.indexOf(value);
      this.skillArr.splice(index,1);    
      // when a skill is deleted is must also deleted from addedSkillArr as well
      var index = 0;
      index = this.addedSkillArr.indexOf(value);
      this.addedSkillArr.splice(index,1);

    }

    valuechange = function(value){
      if(this.addedSkillArr.indexOf(value) == -1){
        this.addedSkillArr.push(value);
      }else{
        alert("This skill already added by you");
      }     
    }

}

template.html

<form #skilForm="ngForm">
        <table>
                <tr>
                        <td colspan="2"><b>Step 3 : Skills</b></td>

                </tr>
                <tr>
                        <td colspan="2">&nbsp;</td>

                </tr>
                <tr *ngFor="let skill of skillArr">
                        <td><label>Skill {{ + " " + skill}} : </label></td>
                        <td><input type="text" (change)="valuechange($event.target.value)" name="skill_{{skill}}"  uniqueskill ngModel class="form-control"/></td>   
                        <td *ngIf="skill !=1">
                                <button type="button" class="btn btn-danger" (click)="deleteRow(skill)">Delete</button>
                        </td>

                </tr>
                <tr>
                        <td colspan="2">&nbsp;</td>

                </tr>
                <tr>
                        <td colspan="2">
                             <button type="button" class="btn btn-info add-new" (click)="addNewRow()"><i class="fa fa-plus"></i> Add New</button>   
                        </td>
                </tr>

                <tr>
                        <td><a class="nav-link" routerLink="../contact_details">Prev</a></td>
                        <td><a class="nav-link" routerLink="../work_experience">Next</a></td>
                </tr>
            </table>

</form>

Примечание: когда я ввожу тот же навык, я могу проверить его с помощью функции ниже

valuechange = function(value){
      if(this.addedSkillArr.indexOf(value) == -1){
        this.addedSkillArr.push(value);
      }else{
        alert("This skill already added by you"); // This is just checking i need to highlight same skill fields and stop user to do so
      } 
}

Пожалуйста, позвольте мне предложить способ, как я могу достичь этого, я новичок в angular, поэтому не знаю много об этом