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
      } 
}

请让我提出建议，我如何才能做到这一点？

如何验证用户输入的角度？

0 个答案: