Как я могу проверить правильность ввода type="number"
только если значение является числовым или нулевым, используя только Reactive Forms (без директив)?
Только цифры [0-9]
и. не допускаются, "е" или любые другие символы.
Что я пробовал до сих пор:
Шаблон:
<form [formGroup]="form" novalidate>
<input type="number" formControlName="number" id="number">
</form>
Составная часть:
export class App {
form: FormGroup = new FormGroup({});
constructor(
private fb: FormBuilder,
) {
this.form = fb.group({
number: ['', [CustomValidator.numeric]]
})
}
}
CustomValidator:
export class CustomValidator{
// Number only validation
static numeric(control: AbstractControl) {
let val = control.value;
if (val === null || val === '') return null;
if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };
return null;
}
}
Plunker
Проблема в том, что когда пользователь вводит что-то, что не является числом ("123e" или "abc"), значение FormControl становится null
, имейте в виду, я не хочу, чтобы поле было обязательным, поэтому, если поле действительно является пустым null
значением должно быть в силе.
Кросс-браузерная поддержка также важна (поля ввода чисел Chrome не позволяют пользователю вводить буквы - кроме "e", но FireFox и Safari делают).