WedX - журнал о программировании и компьютерных науках

Проверка формы Ember.js с помощью ember-cp-validations

В настоящее время я работаю с командой над приложением Ember, которое требует проверки формы. Мы решили использовать ember-cp-validations для проверки внешних форм. Я пытаюсь следовать примеру, они должны добавить несколько простых проверок, но по какой-то причине сообщения проверки не отображаются. Я создал отдельный файл с именем preprint-form-validator.js, который содержит основные проверки с использованием buildValidations.

Затем в моей модели данных я импортировал файл:

import Validations from '../validators/preprint-form-validator';

и расширил с его помощью модель, чтобы модель знала, что должны быть валидации для некоторых ее полей:

export default DS.Model.extend(Validations, { ...

После того, как я это сделал, я последовал примеру и создал компонент проверенного ввода. Эти файлы можно найти здесь. входные данные формы должны выглядеть так.

Наконец, в свой компонент я включил новый компонент валидированного ввода:

{{validated-input model=model valuePath="title" placeholder="Title"}}

Когда я перехожу на страницу с валидатором, есть поле ввода, которое на самом деле ничего не делает, поскольку оно не проверяет и не проверяет какие-либо ограничения, которые я пытался включить. В маршруте, в котором находится компонент, у меня есть модельный хук, который делает createRecord() следующим образом:

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return this.store.createRecord('preprint');
    }
});

Когда я пытался решить проблему, я полагал, что это как-то связано с моделью или с тем, что свойство validation каким-то образом не было установлено в validated-input.js.

Однако в этот момент я застрял и не мог понять, что не так с моей проверкой формы.

Кажется, мне не хватает какой-то важной связи в этой проверке формы, но я не уверен, что это такое. Буду признателен, если кто-нибудь подскажет, что я делаю не так.

10.08.2016

  • В нашем приложении мы использовали это как прямую и простую в использовании валидацию Ember. github.com/DockYard/ember-validations 10.08.2016

Ответы:


1

Не вижу ничего плохого в вашем коде. Как выглядит ваш «валидатор препринт-форм»? Вы также можете проверить компонент формы, если хотите.

//login-form.js
import { LoginValidations } from '../../validators/login-validator';

export default Ember.Component.extend(LoginValidations, {
  isValid: Ember.computed.and('validations.isValid'),
});

//login-form.hbs

{{validated-input type="email" model=this valuePath="email"}}
{{validated-input type="password" model=this valuePath="password"}}

//validators/login-validator.js
import { validator, buildValidations } from 'ember-cp-validations';

export const LoginValidations = buildValidations({
email: [
  validator('presence', {
    presence: true,
    message: 'O email deve ser informado'
  }),
validator('format', {
  type: 'email',
  message: 'Email inválido'
})
],

password: [
  validator('presence', {
    presence: true,
    message: 'A senha deve ser informada'
  }),
  validator('length', {
    min: 6,
    message: 'A senha deve possuir no mínimo 6 caracteres'
  }),    
  validator('password-validator')
]
});

export default { LoginValidations };
14.08.2016
Новые материалы

Как создать диаграмму градиентной кисти с помощью D3.js
Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


Для любых предложений по сайту: [email protected]