代码之家 › 专栏 › 技术社区 › Bhrungarajni

如何在angular2中使用autocomplete选择相同语言时抛出错误消息

typescript angular

-1

Bhrungarajni · 技术社区 · 7 年前

我有一个语言字段,如果我点击添加按钮,就会生成重复的语言字段。在这里,如果我选择一种语言,如果我再次选择相同的语言,它是采取。那么,如何避免同一种语言的多次输入呢。

HTML格式:

        <div class="col-sm-4 pull-left m-b10 m-t10">
          <label class="col-sm-5 pull-left col-form-label g-color-gray-dark-v2 g-font-weight-700 text-sm-left no-padd">Language</label>
          <div class="col-sm-7 pull-left no-padd">
            <input type='text' (keyup)="searchDropDown(176, src7.value ,i)" #src7 formControlName="Language" minlength="3" placeholder="Language"
            />
            <i class="fa fa-caret-down"></i>
            <div *ngIf="patientDropdown && patientDropdown?.language && IsHidden && contactIndex == i" class="emr-dropdown">
              <ul *ngFor="let languageType of patientDropdown?.language" (click)="getValue(languageType, i)" class="p-l10 m-b0 brd-b">
                <li>
                  {{languageType.Description}}
                </li>
              </ul>
            </div>
          </div>
        </div>

TS码:

public initializeAllDropDown(data) {
    this.patientDropdown = <PatientDropDown>{
      language: data.filter(r => r.CategoryId == '176'),
    }
  }

  public searchDropDown(Id, desc, index) {
    let params = { Id, desc: desc }
    this.emrService.getDropDown(params)
      .subscribe((res) => {
        this.IsHidden = true;
        this.initializeAllDropDown(res.Body.Data)
      })
  }

  public getValue(item, cntrl) {
    this.IsHidden = false;
    if (item.CategoryId == 176) {
      this.Communicationx.at(cntrl).get('Language').setValue(item.Description)
    }
  }

项目控制台:

(43) [{â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}, {â¦}]
0: {StatusId: 16269, CategoryId: 176, Code: "ar", Description: "Arabic", Status: 2, â¦}
1: {StatusId: 16270, CategoryId: 176, Code: "bn", Description: "Bengali", Status: 2, â¦}

length: 43
__proto__: Array(0)

在这里,我通过categoryID区分不同的下拉列表字段,因此基于这个下拉列表被分配给特定的字段。

更新时间:

public getValue(item, cntrl) {
    console.log(item);
    this.IsHidden = false;
    if (item.CategoryId == 176) {
      this.selectedLanguage.push(item)
      this.Communicationx.at(cntrl).get('Language').setValue(item.Description)
    }
    let existedLanguage = this.selectedLanguage.filter(
      lang => lang.Description == item.Description
    )[0];
    if (!existedLanguage) {
      if (item.CategoryId == 176) {
        this.selectedLanguage.push(item)
        this.Communicationx.at(cntrl).get('Language').setValue(item.Description)
      }
    } else {
      alert('you already selected this language')
    }
  }

2 回复 | 直到 7 年前

1

Sravan 7 年前

你可以坐飞机 array sleected values ,然后登记当您选择下次时。

在你的 component :

public selectedLanguages = [];

push 进入之内 数组 使用,

this.selectedLanguages.push(item)

public getValue(item, cntrl) {
    this.IsHidden = false;
    if (item.CategoryId == 176) {
      this.selectedLanguages.push(item)
      this.Communicationx.at(cntrl).get('Language').setValue(item.Description)
    }
 }

然后,您可以对语言进行条件检查,并使用Toastr或警报显示错误消息:

public getValue(item, cntrl) {
    console.log(item, 'aaaaaaaaaa');
    this.IsHidden = false;
    let existedLanguage = this.selectedLanguage.filter(
      lang => lang.Description == item.Description
    )[0];
    console.log(existedLanguage, 'bbbbbbbbb')
    if (!existedLanguage) {
      if (item.CategoryId == 176) {
        this.selectedLanguage.push(item)
        this.Communicationx.at(cntrl).get('Language').setValue(item.Description)
      }
    } else {
      alert('you already selected this language')
    }
  }

2

-1

tano 7 年前

可以使用集合: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set