Angular 2 ограничивает поле ввода
Мне было интересно, можно ли ограничить поле ввода определенным форматом, например, столько цифр, сколько вы хотите, а затем "." а потом 2 цифры? Это в основном ввод по цене... И я не хочу простой проверки, такой как атрибут шаблона. Я хочу, чтобы пользователь не мог сделать ложный ввод.
Ответы 2
вы можете использовать функцию HTML5, ввод регулярных выражений
с проверкой шаблона регулярного выражения:
<input type = "text" name = "weight" value = "" pattern = "^[1-9]\d{0,*}\.\d{2}$" />
вы также можете использовать эту библиотеку, украсив свой ввод ключом:
<input type = "text" pattern = "[0-9]+" ng-pattern-restrict />
репозиторий: github.com/AlphaGit/ng-pattern-restrict
Это именно то, чего я не ищу... Я хочу, чтобы пользователь не мог сделать ложный ввод! С вашим предложением я все еще могу делать ложные выводы...
@Kai, вы можете использовать это, используйте библиотеку и украсьте свой ввод ключом: <input type = "text" pattern = "[0-9]+" ng-pattern-restrict /> репозиторий: github.com/AlphaGit/ng-шаблон-ограничение
я установил его и добавил в свой app.module, но теперь я получаю сообщение об ошибке «ReferenceError: angular ist не определен»
это зависит от вашей угловой версии: github.com/AlphaGit/a-шаблон-ограничение для 2+
не работает ... Я скопировал a-pattern-restrict.ts в свой проект, как он мне говорит, а затем импортировал его в свой app.module. Но ничего не делает...
вам нужно использовать директиву. В директиве добавьте hotListener о вводе и проверьте соответствие указанному regExpr. Я делаю директивную маску некоторое время назад. Директива в стекблиц с объявлением о том, что код предоставляется «как есть» без каких-либо гарантий.
@Directive({
selector: '[mask]'
})
export class MaskDirective {
@Input()
set mask(value) {
this.regExpr = new RegExp(value);
}
private _oldvalue: string = "";
private regExpr: any;
private control: NgControl;
constructor(injector: Injector) {
//this make sure that not error if not applied to a NgControl
try {
this.control = injector.get(NgControl)
}
catch (e) {
}
}
@HostListener('input', ['$event'])
change($event) {
let item = $event.target
let value = item.value;
let pos = item.selectionStart; //get the position of the cursor
let matchvalue = value;
let noMatch: boolean = (value && !(this.regExpr.test(matchvalue)));
if (noMatch) {
item.selectionStart = item.selectionEnd = pos - 1;
if (item.value.length < this._oldvalue.length && pos == 0)
pos = 2;
if (this.control)
this.control.control.setValue(this._oldvalue, { emit: false });
item.value = this._oldvalue;
item.selectionStart = item.selectionEnd = pos - 1; //recover the position
}
else
this._oldvalue = value;
}
}
Будьте осторожны, когда вы пишете «маску» в строке (или в html). например для ширины числа два десятичных знака:
[mask] = "'^[+-]?([1-9]\\d*|0)?(\\.\\d\{0,2\})?$'"
(\ должен быть записан как \\, { как \{, } как \}...)
Вы пробовали директивы?