带有延迟加载功能的ng2-select2下拉列表的验证

时间:2020-02-11 13:50:26

标签: angular typescript validation jquery-select2 angular8

我正在使用ng2-select2控件来满足我在Angular 8应用程序中具有延迟加载下拉列表的要求。

该下拉列表的功能正常运行。但是,由于这是我表单中的必填字段,因此在下拉列表中选择'no option'时,我需要引发验证。

<select2 id="ProjectName" name="ProjectName" formControlName="ProjectName" [options]="options" class="select2 font js-example-basic-single js-states" aria-required="true" aria-invalid="false" [ngClass]="{'is-invalid' : submitted &amp;&amp; 
                  Form.controls.ProjectName.errors }" required>
</select2>
<div *ngIf="submitted &amp;&amp;Form.controls.ProjectName.errors" class="text-danger">
  <div *ngIf="Form.controls.ProjectName.errors.required">Project Name is required</div>
</div>

这是我的组件。

this.ajaxOptions = {
  url: "XXXXXXXXX",
  dataType: 'json',
  method: 'GET',
  delay: 250,
  data: function(params) {
    var query = {
      SearchTerm: params.term,
      PageNo: params.page || 1
    }
    return query;
  },
  cache: true,
  processResults: function(data, params) {
    var dataitems = data.items;
    params.page = params.page || 1;

    return {
      results: $.map(dataitems, function(obj) {
        return {
          id: obj.projectID,
          text: obj.projectName
        };
      }),
      pagination: {
        more: (params.page * 50) < data.total_count
      }
    };
  }
};

this.options = {
  ajax: this.ajaxOptions,
  tags: false,
  multiple: false,
  width: "100%",
};

0 个答案:

没有答案