Я хотел бы избежать пробелов/пустых пространств в моей угловой форме? Является ли это возможным? Как это может быть сделано?
Как проверить пробелы/пустое пространство? [Угловая 2]
Ответ 1
Возможно, эта статья поможет вам http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
В этом подходе вы должны использовать FormControl, а затем следить за изменениями значений, а затем применять маску к значению. Примером может служить:
...
form: FormGroup;
...
ngOnInit(){
this.form.valueChanges
.map((value) => {
// Here you can manipulate your value
value.firstName = value.firstName.trim();
return value;
})
.filter((value) => this.form.valid)
.subscribe((value) => {
console.log("Model Driven Form valid value: vm = ",JSON.stringify(value));
});
}
Ответ 2
Вы можете создать собственный валидатор, чтобы справиться с этим.
new FormControl(field.fieldValue || '', [Validators.required, this.noWhitespaceValidator])
Добавьте метод noWhitespaceValidator в ваш компонент
public noWhitespaceValidator(control: FormControl) {
const isWhitespace = (control.value || '').trim().length === 0;
const isValid = !isWhitespace;
return isValid ? null : { 'whitespace': true };
}
и в HTML
<div *ngIf="yourForm.hasError('whitespace')">Please enter valid data</div>
Ответ 3
Я создал валидатор, который сделал то же самое, что и angular для minLength, за исключением того, что я добавил trim()
import { Injectable } from '@angular/core';
import { AbstractControl, ValidatorFn, Validators } from '@angular/forms';
@Injectable()
export class ValidatorHelper {
///This is the guts of Angulars minLength, added a trim for the validation
static minLength(minLength: number): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } => {
if (ValidatorHelper.isPresent(Validators.required(control))) {
return null;
}
const v: string = control.value ? control.value : '';
return v.trim().length < minLength ?
{ 'minlength': { 'requiredLength': minLength, 'actualLength': v.trim().length } } :
null;
};
}
static isPresent(obj: any): boolean {
return obj !== undefined && obj !== null;
}
}
Затем я в своем app.component.ts переопределил функцию minLength, предоставляемую angular.
import { Component, OnInit } from '@angular/core';
import { ValidatorHelper } from 'app/common/components/validators/validator-helper';
import { Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor() { }
ngOnInit(): void {
Validators.minLength = ValidatorHelper.minLength;
}
}
Теперь везде, где используется встроенный валидатор angular minLength, он будет использовать minLength, который вы создали в помощнике.
Validators.compose([
Validators.minLength(2)
]);
Ответ 4
Запретить пользователю вводить пробел в текстовом поле в Angular 6
<input type="text" (keydown.space)="$event.preventDefault();" required />
Ответ 5
Чтобы избежать представления формы, просто используйте required
attr в полях ввода.
<input type="text" required>
Или, после отправки
Когда форма отправлена, вы можете использовать str.trim(), чтобы удалить пустые пробелы в начало и конец строки. Я сделал функцию отправки, чтобы показать вам:
submitFunction(formData){
if(!formData.foo){
// launch an alert to say the user the field cannot be empty
return false;
}
else
{
formData.foo = formData.foo.trim(); // removes white
// do your logic here
return true;
}
}
Ответ 6
Если вы используете Angular Reactive Forms, вы можете создать файл с функцией - валидатором. Это не позволит вводить только пробелы.
import { AbstractControl } from '@angular/forms';
export function removeSpaces(control: AbstractControl) {
if (control && control.value && !control.value.replace(/\s/g, '').length) {
control.setValue('');
}
return null;
}
а затем в вашем файле машинописи компонентов используйте валидатор, например, такой.
this.formGroup = this.fb.group({
name: [null, [Validators.required, removeSpaces]]
});
Ответ 7
Это немного другой ответ на следующий, который работал для меня:
public static validate(control: FormControl): { whitespace: boolean } {
const valueNoWhiteSpace = control.value.trim();
const isValid = valueNoWhiteSpace === control.value;
return isValid ? null : { whitespace: true };
}
Ответ 8
Чтобы автоматически удалить все пробелы из поля ввода, вам нужно создать собственный валидатор.
removeSpaces(c: FormControl) {
if (c && c.value) {
let removedSpaces = c.value.split(' ').join('');
c.value !== removedSpaces && c.setValue(removedSpaces);
}
return null;
}
Работает с введенным и вставленным текстом.
Ответ 9
После долгих испытаний я нашел [a-zA-Z\\s]*
для буквенно-цифровых символов с пробелами
Пример:
Нью-Йорк
Нью-Дели
Ответ 10
Я использовал функцию valueChanges формы для предотвращения пробелов. каждый время обрежет все поля после того, как требуемая проверка будет работать для пустой строки.
Как здесь: -
this.anyForm.valueChanges.subscribe(data => {
for (var key in data) {
if (data[key].trim() == "") {
this.f[key].setValue("", { emitEvent: false });
}
}
}
Edited --
если вы работаете с любым числом/целым числом в вашем элементе управления формы, в этом случае функция обрезки не будет работать напрямую использовать как:
this.anyForm.valueChanges.subscribe(data => {
for (var key in data) {
if (data[key] && data[key].toString().trim() == "") {
this.f[key].setValue("", { emitEvent: false });
}
}
}