Question

添加某些指令的最佳方式是什么，例如将ng-focus-if与自定义模板一起使用时，angular-formly有条件地使用表单的输入元素吗？

我想像这样使用它：

$scope.formFields = [
  {
    key: 'email',
    type: 'input',
    templateOptions: {
      type: 'email',
      placeholder: 'Your E-Mail address',
      required: true,
      focusIf: 'some-expression' // <--- optional directive configuration here
    }
  }
];

这个想法是仅在实际提供配置选项时才应用该指令。

Answer 1

您可以使用 ngModelAttrs 将 angular-formly 属性与 ng-focus-if 属性或任何其他自定义属性相结合。

在您的情况下，您的代码应该是：

 $scope.formFields = [ {
        key: 'email',
        type: 'input',
         ngModelAttrs: {
              focusIf: {
                attribute: 'focus-if'   //directive declaration
              }
            },
        templateOptions: {
          type: 'email',
          placeholder: 'Your E-Mail address',
          focusIf: '', //directive default value
          required: true           
        }       
      }]

这是一个可以帮助您的working demo：

Answer 2

感谢@kentcdodds和@aitnasser，我设法弄清楚如何实现理想的行为。

只是想在这里分享扩展版本。

我们的想法是在定义类型时使用ngModelAttrs属性：

formlyConfigProvider.setType({
  name: 'input',
  template: '<input ng-model="model[options.key]">',
  defaultOptions: {
    ngModelAttrs: {
      focusIf: {
        attribute: 'focus-if'
      }
    }
  }
});

请确保不提供focusIf的默认值。这将阻止默认情况下在输入元素上添加指令。

然后在您的字段上设置所需的表达式：

$scope.formFields = [
 {
   key: 'email',
   type: 'input',
   templateOptions: {
     type: 'email',
     required: true,
     placeholder: 'E-Mail',
     focusIf: 'true' // Or any other Angular expression
   }
 }
];

随意使用此JSBin。

使用angular-formly时动态添加指令

2 个答案: