Подробные сообщения об ошибках в формах Angular Dart

У меня есть следующая форма с некоторыми простыми правилами проверки:

<form name="signup_form" novalidate ng-submit="ctrl.signupForm()">
  <div class="row">
    <input placeholder="Username"
        name="username"
        ng-model="ctrl.username"
        required
        ng-minLength=3
        ng-maxLength=8>
  </div>
  <div ng-show="signup_form['username'].dirty &&
      signup_form['username'].invalid">
    <!-- ... -->
  </div>

  <button type="submit">Submit</button>
</form>

Я хотел бы отобразить определенные сообщения об ошибках для required, ng-minLength и ng-maxLength, но мне не удается перейти к signup_form['username'].errors, чтобы получить конкретную ошибку.

Я могу легко получить доступ к карте errors в контроллере, именно в разметке я не могу получить дескриптор конкретной ошибки. Я хотел бы иметь возможность сделать примерно что-то вроде этого:

<div ng-show="signup_form['username'].errors['minlength'].invalid>
    <!-- ... -->
</div>

То есть что-то вроде следующего в angularJS:

<div ng-show="signup_form.username.$error.required">This field is required</div>

dart angular-dart
person Shailen Tuli    schedule 20.03.2014    source источник
comment
для начала вы можете взглянуть на аналогичный вопрос, который я задал некоторое время назад stackoverflow.com/questions/21812728   -  person Günter Zöchbauer    schedule 20.03.2014
comment
Приведенный выше код отлично работает для меня. Единственное, чего не хватает, так это того, что вы не включили определение ng-hide. <style> .ng-hide { display: none }</style>   -  person Misko Hevery    schedule 20.03.2014
comment
Хм. Misko, карта errors работает некорректно в представлении. Например, добавление <div>{{signup_form['username'].errors['required'] != null}}</div><div>{{signup_form['username'].errors['minlength'] != null}}</div><div>{{signup_form['username'].errors['maxlength'] != null}}</div> приводит к тому, что первый <div> показывает true, а два других показывают false независимо от входного значения.   -  person Shailen Tuli    schedule 20.03.2014
comment
Я снова обновил свой ответ. Я нашел решение, которое считаю достаточно хорошим.   -  person Günter Zöchbauer    schedule 20.03.2014
comment
Это немного изменилось в Angular 0.9.10, поэтому я снова обновил его.   -  person Günter Zöchbauer    schedule 21.03.2014

Ответы (1)


arrow_upward
0
arrow_downward

Рабочий пример для

Вдохновленный этим фильтром, я снова попробовал этот подход.

Угловой 0.9.9

@NgFilter(name: 'errors')
class ErrorFilter {
  call(val) {
    if(val != null) {
      return val.map.keys;
    }
    return null;
  }
}

и в разметке

{{signup_form['username'].errors | errors}}

EDIT для Angular 0.9.10

@NgFilter(name: 'errors')
class ErrorFilter {
  call(val) {
    if(val != null) {
      return val.keys;
    }
    return null;
  }
}

и в разметке

{{signup_form['username'].errorStates | errors}}

Из обсуждений, которые я наблюдал в репозитории AngularDart Github, я узнал, что на подходе лучшие решения.

связанная открытая проблема
Когда этот https://github.com/angular/angular.dart/pull/771 приземлился
, надеюсь, возможны лучшие решения.

person Günter Zöchbauer    schedule 20.03.2014
comment
Гюнтер, я прекрасно понимаю ошибки в контроллере. Это в HTML, где это не работает. Например, если я добавлю в разметку {{signup_form['username'].errors}}, она всегда будет отображать {required: [Instance of 'NgModel']}. - person Shailen Tuli; 20.03.2014
comment
Шейлен, я понял (заняло немного), я работаю над этим, но у меня есть только решение, в котором вам нужен собственный геттер на контроллере (уродливо). (Мне вообще не нравится новое обнаружение изменений). - person Günter Zöchbauer; 20.03.2014
comment
Я также обновил вопрос, чтобы уточнить. Спасибо за помощь, Гюнтер. - person Shailen Tuli; 20.03.2014
comment
Разметка для прямого доступа будет signup_form['username'].errors.keys, но Angular (0.9.9) не обновляет представление при изменении keys. - person Günter Zöchbauer; 20.03.2014
comment
Это правильно. keys не обновляются, что объясняет, почему в моем примере ключ всегда отображается как required. - person Shailen Tuli; 20.03.2014
comment
На самом деле keys обновляются, но представление не обновляется, чтобы отразить изменения (просто чтобы убедиться, что мы говорим об одном и том же). В другом варианте использования было предложено использовать фильтр типа {{somelist | json}}, но и здесь он не работает. - person Günter Zöchbauer; 20.03.2014