директива электронной почты angularjs с разным значением для отображения и модели

у меня есть требование, чтобы я мог иметь предопределенный суффикс для электронной почты, поэтому пользователю просто нужно ввести первую часть электронной почты... поэтому скажем, что мой идентификатор электронной почты: [email protected]

поэтому ввод будет иметь суффикс gmail.com, и пользователь должен будет ввести только «abc». так что я хочу добиться: для отображаемого значения должно быть abc, но для значения ngModel должно быть «[email protected]».

как я могу добиться этого с помощью директив??

у меня есть базовая директива: plunker

но не уверен, как использовать, связать или скомпилировать функцию для достижения вышеуказанного результата


angularjs angularjs-directive email-validation
person harishr    schedule 23.02.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Решение использует $parsers и $formatter.

Попробуйте эту директиву:

app.directive("csRadioFieldFormat", function() {
  return {
    require: 'ngModel',

    restrict: 'A',
    link: function(scope, element, attrs, ctr) {
      ctr.$parsers.unshift(function(value) {

        var isValid = value !== "";

        ctr.$setValidity("required", isValid);
        if (!isValid){
          return undefined;
        }

        if (value.indexOf(attrs.suffix) < 0) {
          value = value + attrs.suffix;
        }

        return value;
      });

      ctr.$formatters.unshift(function(value) {
        value = value || "";
        return value.replace(attrs.suffix, "");
      });
    }
  }
});

Примените его к своему полю электронной почты:

<input type="email" name="myfield" ng-required="options.required" ng-model="ngModel" cs-radio-field-format suffix="{{options.suffix}}"/>

ДЕМО

person Khanh TO    schedule 23.02.2014
comment
Большое спасибо за ответ, он работает именно так, как ожидалось ... еще один вопрос: почему стиль начальной загрузки по-прежнему показывает поле как недопустимое (красное). Я думаю, что проблема в ‹input type=email /›. но я не могу сделать тип = текст, или если я сделаю тип = текст, тогда мне придется использовать шаблон для проверки электронной почты. Какой лучший выход из этого? - person harishr; 24.02.2014
comment
вы можете посмотреть на этот планк: plnkr.co/edit/2Bn8Pqm8umMXTb4Um6mY?p=preview по какой-то причине парсер не вызывается... - person harishr; 24.02.2014
comment
@HarishR: для стиля это проблема css. Некоторые правила, такие как input:focus:invalid, применяются на основе текущего значения в DOM, это поведение браузера. Я не знаю, как обойти эту проблему, когда мы используем type="email" - person Khanh TO; 24.02.2014
comment
@HarishR: директива с $parsers должна применяться непосредственно к <input type="number">. В вашем случае ваши парсеры добавления внутри csNumberField не применяются к <input type="number"> в шаблоне вашей директивы. - person Khanh TO; 24.02.2014
comment
@HarishR: для проблемы type="email". Я думаю, вам нужно проверить поле вручную и добавить класс к вводу =>, а затем стилизовать ввод на основе его класса. - person Khanh TO; 24.02.2014
comment
хорошо, понял.. так что в основном мне нужно написать собственный валидатор, который будет проверять значение с предоставленным суффиксом... - person harishr; 24.02.2014
comment
давайте продолжим это обсуждение в чате - person harishr; 24.02.2014