Удалить пробел в начале текста
В настоящее время я работаю с реактивной формой; в основном пользователь не должен включать информацию об отправке (включить кнопку сохранения), если входные данные неверны (отправлены с пробелами). В этом смысле для имени я требую, чтобы пользователь не мог начинать свое имя с пробела, но разрешал пробелы после ввода букв, у меня в настоящее время есть ограничение на использование специальных символов и цифр в одном и том же поле. Я нашел решения, связанные с Trim, я пытался его реализовать, но проверка поля не выполняется в «реальном времени», сразу после нажатия кнопки «Сохранить» появляется «ошибка». Любая помощь мне очень поможет
Это мой html-код
form nz-form class = "toppart" (ngSubmit) = "sendUserData()" [formGroup] = "createForm" autocomplete = "off">
<div class = "card-body">
<div class = "row my-3">
<div class = "col col-3">
<label> Name <small>*</small></label>
<nz-form-item>
<nz-form-control nzErrorTip = "Please input your name!">
<nz-input-group>
<!-- (ngModelChange) = "nameChange()" -->
<input formControlName = "name" nz-input placeholder = "Enter Name"
onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32) )' required />
</nz-input-group>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
</form>
Форма в машинописи
public createForm = new FormGroup({
name: new FormControl('', Validators.required),
email: new FormControl('',Validators.required),
password: new FormControl('',Validators.required),
created_by: new FormControl(''),
role: new FormControl([],Validators.required),
});
Этого не должно происходить: эти пробелы должны быть удалены по мере их появления и не должны отображаться визуально.
Ответы 2
Вы можете добавить шаблон регулярного выражения в свое поле. Это позволит выполнять проверку при вводе.
Validators.pattern(^[^-\s][a-zA-Z0-9_\s-]+$)
вы можете создать собственный валидатор
public noWhitespaceValidator(control: FormControl) {
const isWhitespace = (control.value || '').trim().length === 0;
const isValid = !isWhitespace;
return isValid ? null : { 'whitespace': true };
}
и передайте это, чтобы сформировать контроль
new FormControl('', [Validators.required, this.noWhitespaceValidator]);
в HTML
<span *ngIf = "createForm.controls.name.hasError('whitespace')">Name Cannot contain only spaces</span>
это покажет ошибку, если поле имени содержит только пробелы
или если вы хотите удалить пробелы в режиме реального времени вместо отображения ошибки, вы можете использовать изменения значений
this.createForm.controls.name.valueChanges().subscribe(res = {
this.createForm.controls.name.setValue((res || '').trim());
})
Спасибо, Салу, ваш ответ правильный, но он не позволяет мне вводить пробелы в любое время, поэтому он не соответствует тому, что требуется, в любом случае спасибо за вашу оценку :)