Теперь вам не нужно использовать FormBuilder
и все эти сложные угловые штуки с проверкой правильности. Я поместил более подробную информацию из этого (Angular 2.0.8 - 3march2016): https://github.com/angular/angular/commit/38cb526
Пример из репо:
<input [ngControl]="fullName" pattern="[a-zA-Z ]*">
Тестирую, работает :) - вот мой код:
<form (ngSubmit)="onSubmit(room)" #roomForm='ngForm' >
...
<input
id='room-capacity'
type="text"
class="form-control"
[(ngModel)]='room.capacity'
ngControl="capacity"
required
pattern="[0-9]+"
#capacity='ngForm'>
Альтернативный подход (ОБНОВЛЕНИЕ июнь 2017 г.)
Проверка выполняется ТОЛЬКО на стороне сервера. Если что-то не так, сервер возвращает код ошибки, например, HTTP 400 и следующий объект json в ответ тело (как пример):
this.err = {
"capacity" : "too_small"
"filed_name" : "error_name",
"field2_name" : "other_error_name",
...
}
В шаблоне html я использую отдельный тег (div / span / small и т. Д.)
<input [(ngModel)]='room.capacity' ...>
<small *ngIf="err.capacity" ...>{{ translate(err.capacity) }}</small>
Если в «capacity» есть ошибка, то будет виден тег с переводом сообщения. Такой подход имеет следующие преимущества:
- это очень просто
- избегайте дублирования кода проверки бэкэнда на веб-интерфейсе (для проверки регулярного выражения это может предотвратить или усложнить атаки ReDoS)
- контроль способа отображения ошибки (например, тег
<small>
)
- backend возвращает error_name, который легко перевести на нужный язык во внешнем интерфейсе
Конечно, иногда я делаю исключение, если требуется проверка на стороне внешнего интерфейса (например, поле retypePassword
при регистрации никогда не отправляется на сервер).
person
Kamil Kiełczewski
schedule
10.03.2016