Angular Formly - 如果选项已经在前一个 select 字段中 selected，Select 字段应该给出错误

Question

我正在使用 angular 正式创建 form.I 使用 angular 正式重复部分在添加按钮上动态添加了 Select 字段和文本区域。

要求 - 在多个 select 字段中，每个 Select 字段都应该有唯一的选项 selected。

如何使用 angular 形式检查选项是否已经 selected 在先前的 selected 字段中并显示错误消息，如 "Currency already selected"

Controller.js

$scope.formFields = [   {
          type: 'repeatSection',
          key: 'details',
          templateOptions: {
          btnText:'Add ',
            fields: [
              {
                className: 'row',
                fieldGroup: [
                        {
                        type: 'select', 
                        key: 'currency',
                        wrapper: 'loading', 
                     templateOptions: {
                          label: $translate.instant('CURRENCY'),
                          valueProp: "value",
                             labelProp: "name",
                           options:  [
                                {name: "Rupee", value: "INR"},
                                {name: "Doller", value: "$"},
                                {name: "Pound", value: "Pound"}
                              ] ,
                             required: true,
                             placeholder:  $translate.instant('SELECT TYPE FROM LIST'),
                         }
                       },          
                  {
                    type: 'textarea',
                    key: 'debitNote',
                    templateOptions:
                    {
                      label: $translate.instant('DEBIT NOTE'),
                      rows: 4
                    }
                  }
                ]
              }
            ]
          }

    }
];  

Answer 1

选项 1：自定义验证器

制作自定义验证器，例如：

vm.customValidator = {
  expression: function(viewValue, modelValue, scope) {
    if(scope.model.currencies){
      angular.forEach(scope.model.currencies, function(val, key) {
        if(val === modelValue) {
          console.log('Currency already selected! '+val+' === '+modelValue);
          return false;
        }
      });
    }
    return true;
  },
  message: 'Currency already selected'
};

示例：http://jsbin.com/nopike/1/edit?html,js,console,output

*注。 验证消息没有显示，因为我很赶时间。请参考以下链接：

• Custom Validators Example
• Bootstrap Select Example

选项 2：多select

使用多select:

• Multi-select Example