Блог

В настоящее время я работаю с реактивной формой; в основном пользователь не должен включать отправку информации (включить кнопку сохранения), если входные данные неверны (отправлены с пробелами). В этом смысле для имени я требую, чтобы пользователь не мог начинать свое имя с пробела, но разрешал пробелы после ввода букв, в настоящее время у меня есть ограничение на специальные символы и цифры в том же поле. Я нашел решения, связанные с обрезкой, я пытался это реализовать, но проверка поля не выполняется в режиме «реального времени», сразу после нажатия кнопки сохранения появляется сообщение «ошибка». Любая помощь мне очень поможет

Это код mi 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 amp;amp; event.charCode <= 90) || (event.charCode >= 97 amp;amp; event.charCode <= 122) || (event.charCode == 32) )' required />
                        </nz-input-group>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
 </div>
 </div>
 </form>
 

Форма в typescript

 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),
  });
 

Этого не должно происходить: эти пробелы должны удаляться по мере их получения и не должны отображаться визуально

вы можете создать пользовательский валидатор

 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>
 

это покажет ошибку, если поле name содержит только пробелы

или, если вы хотите удалить пробелы в режиме реального времени вместо отображения ошибки, вы можете использовать valuechanges

 this.createForm.controls.name.valueChanges().subscribe(res = {
    this.createForm.controls.name.setValue((res || '').trim());
})
 

Вы можете добавить шаблон регулярных выражений в свое поле. Это позволит выполнять проверку во время ввода.

Validators.pattern(^[^-s][a-zA-Z0-9_s-] $)

См.: Шаблон проверки формы