Angular Formly - 如果在前一个选择字段中已选择了选项,则选择字段应该给出错误

时间:2015-12-14 13:17:37

标签: angularjs angular-formly

我正在使用角度形式来创建表单。我已使用角度形式重复部分在“添加”按钮上动态添加了“选择字段和文本区域”。

要求 - 从多个选择字段中,每个选择字段都应选择唯一选项。

如何使用角度形式检查先前所选字段中是否已选择选项,并显示错误消息,例如"已选择货币"

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

    }
];  

1 个答案:

答案 0 :(得分: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

<强> *注意。由于我匆忙,验证消息未显示。请参阅以下链接:

选项2:多选

使用多选: