代码之家  ›  专栏  ›  技术社区  ›  Vivian River

如何验证用户在剑道UI自动完成小部件上所做的选择?

  •  1
  • Vivian River  · 技术社区  · 7 年前

    在数据源中,每个名称都有一个ID,但用户永远看不到ID,因为它是一个人工密钥。

    如果用户输入“samh”,Kendo可能会建议用户在表单中填写“samharris”或“samhouston”。如果用户选择其中一个,或者手动键入这两个名称中的一个,那么在提交表单时,可以将名称与找到的数据源和ID进行比较。(因为最终,我们要存储所选用户的ID)

    但是,我需要处理这样一种情况:用户可能输入的名称与数据源中的任何内容都不匹配。在这种情况下,web应用程序应该阻止用户提交表单,并建议用户做出有效选择。

    我该怎么做?

    (我在AngularJS 1.6中使用剑道UI)

    1 回复  |  直到 7 年前
        1
  •  1
  •   SehaxX    7 年前

    在这里您可以找到一些绑定的示例以及如何使用它。我在我从事的一个项目中找到了一个例子。

        <input kendo-auto-complete ng-model="country" k-data-source="countryNames" k-options="autocompleteoptions" />
    
    <script>
      angular.module("KendoDemos", [ "kendo.directives" ])
              .controller("MyCtrl", function($scope){
                            $scope.autocompleteoptions = {
                    //dataSource: items,
                    //dataTextField: "name",
                    //dataValueField: "id",
                    //filter: "contains",
                    minLength: 2,
                    select: function (e) {
                      console.log(e);
                        var dataItem = this.dataItem(e.item.index());
                        console.log(dataItem);
                    }
                  }
    
                  $scope.countryNames = [
                  "Albania",
                  "Andorra",
                  "Armenia",
                  "Austria",
                      ];
              })
    </script>
    

    以dojo为例: Dojo

    这里还有一些关于角度JS绑定的信息: https://docs.telerik.com/kendo-ui/AngularJS/introduction#the-k-value-primitive-attribute

    希望这对你有帮助。

    干杯