Проекты на Angular

В этом проекте вы узнаете, как добавить проверку пробелов или наличия значения в форме Angular 13.

Кроме того, мы объясним, как добавить проверку на отсутствие значений в поле ввода HTML с помощью реактивных форм в приложении angular.

Форма является основным компонентом любого приложения и лучше всего используется для сбора информации от пользователей. Форма проверяется таким образом, чтобы неверная информация не могла быть отправлена.

Ранее мы рассмотрели другие аспекты проверки формы в Angular. В этом примере проверки пользовательских данных Angular мы покажем, как интегрировать отсутствие пробелов для формирования поля ввода в приложении angular с нуля. Вы можете с использовать этот проект для версий angular 13, 12, 11, 10 и 9.

• Шаг 1: Установить интерфейс командной строки Angular
• Шаг 2: Загрузить проект Angular
• Шаг 3: Добавьте модуль Реактивных Форм
• Шаг 4: Создавать пользовательский валидатор
• Шаг 5: Обновить шаблон компонента
• Шаг 6: Обновить HTML-шаблон
• Шаг 7: Запустить приложение Angular

На первом этапе вам нужно начать с добавления интерфейса командной строки Angular, широко известного как CLI.

npm install -g @angular/cli

Теперь вы готовы создать новое приложение Angular, введите команду и нажмите enter, чтобы установить приложение.

ng new ng-demo

После выполнения предоставленной команды интерфейс командной строки создаст каркасный проект в папке ng-demo.

Перейдите в папку проекта приложения.

cd ng-demo

npm install bootstrap

Добавьте CSS начальной загрузки в файл angular.json:

...
...
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
],
...
...

Затем обязательно импортируйте ReactiveFormsModule и FormsModule для работы с формой в Angular. Итак, добавьте данный код в src/app/app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule    
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

На этом шаге вам необходимо создать файл app/name.validator.ts и создать пользовательский класс, используя AbstractControl и ValidationErrors, этот класс поможет добавить пользовательскую проверку в приложение angular.

import { AbstractControl, ValidationErrors } from '@angular/forms';
  
export class NameValidator {
    static noWhiteSpace(control: AbstractControl) : ValidationErrors | null {
        if((control.value as string).indexOf(' ') >= 0){
            return {noWhiteSpace: true}
        }
        return null;
    }
}

Чтобы создать форму, вам необходимо импортировать FormBuilder, FormGroup, валидаторы из "@angular/forms", или импортировать ранее созданный пользовательский валидатор NameValidator из "./name.validator".

Обновите предоставленный код в файле src/app/app.component.ts.

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NameValidator } from './name.validator';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  public myForm: FormGroup;
  submitted = false;

  constructor(private formBuilder: FormBuilder) {
    this.myForm = formBuilder.group({
      name: ['',
        [
          Validators.required,
          Validators.minLength(5),
          NameValidator.noWhiteSpace
        ]
      ]
    })
  }

  get m(){
    return this.myForm.controls;
  }

  onSubmit(){
    this.submitted = true;
    if (this.myForm.invalid) {
      return;
    }
  }
}

На этом шаге вы будете использовать данный код для создания формы. Определите встроенную проверку с помощью метода геттера, мы добавим обязательную, минимальную длину и недопустимое пустое пространство для проверки в файле src/app/app.component.html.

<div class="container mt-5">
  <h3 class="text-center btn-primary mt-3 mb-3 pt-2 pb-2" >Angular 13 Реактивные Формы Валидация</h3>

  <form [formGroup]="myForm" (ngSubmit)="onSubmit()" novalidate>
    <div class="form-group">
      <label>Введите ваше имя !</label>
      <input type="text" formControlName="name" class="form-control mb-2"
             [ngClass]="{ 'is-invalid':  m['name'].touched &&  m['name'].errors }" />

      <div *ngIf="submitted && m['name'].errors" class="alert alert-danger">
        <div *ngIf="m['name'].errors['required']">Введите имя</div>
        <div *ngIf="m['name'].errors['minlength']">Имя должно состоять из 5 символов</div>
        <div *ngIf="m['name'].errors['noWhiteSpace']">Пробелы не разрешаются</div>
      </div>
    </div>

    <div class="d-grid mt-3">
      <button class="btn btn-primary" type="submit">Сохранить</button>
    </div>
  </form>
</div>

Наконец, вам нужно запустить сервер разработки приложений, используйте предложенную команду.

ng serve

Откройте браузер, введите указанный URL-адрес и нажмите enter, чтобы проверить правильность проверки.

http://localhost:4200

В этом Angular проекте мы научились создавать и настраивать реактивную форму с помощью API ReactiveFormsModule и создавать пользовательский валидатор для проверки имени на наличие пробелов и пустых мест.