Добавляйте директиву динамически при использовании angular-formly

Что было бы лучшим способом добавить некоторую директиву, например. 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
    }
  }
];

Идея состоит в том, чтобы применять директиву только тогда, когда опция конфигурации действительно предоставлена.


angularjs angular-formly
person Slava Fomin II    schedule 12.01.2016    source источник
comment
Вам следует изучить ngModelAttrs. Это немного сложно, но, определив пользовательский тип, который определяет это как defaultOption, вы можете выполнить то, что ищете. Посмотрите на пример маски пользовательского интерфейса.   -  person kentcdodds    schedule 12.01.2016
comment
Привет, Кент! Спасибо, что подтолкнули меня в правильном направлении! Просто хотел сказать вам, что Formly действительно потрясающий и очень гибкий. Я люблю Angular, но формы все время были для меня огромной болью, теперь все наладилось, благодаря вам. Я создал JSBin с моей интеграцией ngFocusIf, не стесняйтесь редактировать его в соответствии с вашими потребностями и добавлять в список примеров. Ваше здоровье! jsbin.com/vimayu/3/edit?html,js,output   -  person Slava Fomin II    schedule 12.01.2016

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете комбинировать атрибуты angular-formly с атрибутами ng-focus-if или любыми другими пользовательскими атрибутами с помощью ngModelAttrs.

в вашем случае ваш код должен выглядеть так:

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

это рабочая демонстрация, которая может помочь вам:

person aitnasser    schedule 12.01.2016

arrow_upward
2
arrow_downward

Мне удалось выяснить, как добиться желаемого поведения, благодаря @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.

person Slava Fomin II    schedule 12.01.2016