Как добавить шаблон проверки формы в Angular 2?

У меня есть простая форма, которая должна проверять, нет ли начала и конца ввода.

В HTML5 я сделаю следующее:

 

Какова правильная собственность для шаблона проверки в новой директиве Angular 2 ngControl? Официальному бета-API по-прежнему не хватает документации по этой проблеме.

Теперь вам не нужно использовать FormBuilder и весь этот сложный валионационный угловой материал. Я подробно изложил это (Angular 2.0.8 – 3march2016): https://github.com/angular/angular/commit/38cb526

Пример из репо:

  

Я тестирую его, и он работает 🙂 – вот мой код:

 
...

ОБНОВЛЕНИЕ Июнь 2017 года

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

Проверка выполняется ТОЛЬКО на стороне сервера (не во всех углах!), И если что-то не так, сервер (Restful API) возвращает некоторый код ошибки, например, HTTP 400 и следующий объект json в корпусе ответа (который в угловом I помещен в переменную err ):

 this.err = { "capacity" : "too_small" "filed_name" : "error_name", "field2_name" : "other_error_name", ... } 

(если ошибка проверки возврата сервера в другом формате, то вы обычно можете легко сопоставить ее с надстройкой)

В шаблоне html я использую отдельный тег (div / span / small и т. Д.),

  {{ translate(err.capacity) }} 

Как вы видите, когда в «емкости» есть некоторая ошибка, тогда будет виден тег с переводом ошибок (на язык пользователя). Такой подход имеет следующие преимущества:

  • это очень просто
  • в угловом мы не дублируем код проверки, который (и должен быть) на сервере (в случае проверки регулярного выражения это может либо предотвратить, либо осложнить атаки ReDoS )
  • мы имеем полный контроль над тем, как ошибка будет показана пользователю (здесь как egzample в ),
  • потому что в ответе сервера мы возвращаем error_name (вместо прямого сообщения об ошибке), мы можем легко изменить сообщение об ошибке (или перевести его), изменив только внешний угловой код (или файлы с переводами). Поэтому в этом случае нам не нужно касаться кода backend / server.

Конечно, иногда (если это необходимо – например, поле retypePassword, которое никогда не отправляется на сервер), я делаю исключения из вышеуказанного подхода и делаю некоторые проверки в угловом (но использую аналогичный механизм this.err для отображения ошибок (поэтому я не использую pattern атрибута непосредственно во input теге, но я делаю проверку регулярного выражения в некотором компонентном методе после того, как пользователь поднимет правильное событие, такое как изменение ввода или сохранение).

Начиная с версии 2.0.0-beta.8 (2016-03-02), функция Angular теперь включает Validators.pattern Validational.pattern.

См. CHANGELOG

Вы можете создать свою форму с помощью FormBuilder, поскольку это позволит вам более гибко настраивать форму.

 export class MyComp { form: ControlGroup; constructor(@Inject()fb: FormBuilder) { this.form = fb.group({ foo: ['', MyValidators.regex(/^(?!\s|.*\s$).*$/)] }); } 

Затем в вашем шаблоне:

  
Please correct foo entry !

Вы также можете настроить ng-invalid CSS class.

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

 export class MyValidators { static regex(pattern: string): Function { return (control: Control): {[key: string]: any} => { return control.value.match(pattern) ? null : {pattern: true}; }; } } 

Надеюсь, что это вам поможет.

выборочная проверка шаг за шагом

Шаблон Html

  
field is required.
Special Characters are not Allowed

Компонент App.ts

 import {Control, ControlGroup, FormBuilder, Validators, NgForm, NgClass} from 'angular2/common'; import {CustomValidator} from '../../yourServices/validatorService'; 

в classе define

  demoForm: ControlGroup; constructor( @Inject(FormBuilder) private Fb: FormBuilder ) { this.demoForm = Fb.group({ spec: new Control('', Validators.compose([Validators.required, CustomValidator.specialCharValidator])), }) } 

под { ../../yourServices/validatorService.ts }

 export class CustomValidator { static specialCharValidator(control: Control): { [key: string]: any } { if (control.value) { if (!control.value.match(/[-!$%^&*()_+|~=`{}\[\]:";#@'<>?,.\/]/)) { return null; } else { return { 'invalidChar': true }; } } } } 

Мое решение с Angular 4.0.1: просто отображение пользовательского интерфейса для ввода CVC – где CVC должен быть ровно 3 цифры:

  
... CVC is required. CVC must be 3 numbers. ...
Давайте будем гением компьютера.