Angular: Валидация 10-значного мобильного номера в Angular 14

В этом руководстве мы научимся проверять 10-значные телефонные/мобильные номера в приложениях на Angular 14.

Валидация 10-значного мобильного/телефонного номера в Angular 14

Используйте следующие шаги для проверки 10-значного номера телефона/мобильного номера в приложениях Angular 14:

Шаг 1 - Создание нового приложения Angular

Прежде всего, откройте терминал и выполните следующую команду для установки приложения Angular:

ng new my-new-app

Шаг 2 - Установка библиотеки Bootstrap в приложение Angular

Затем выполните следующую команду в терминале, чтобы установить библиотеку Bootstrap в приложение Angular. Итак, вы можете установить пакеты, выполнив следующие команды в терминале:

npm install --save bootstrap

Затем необходимо добавить приведенный ниже код в файл angular.json:

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

Шаг 3 - Импорт модулей в приложение Angular

Зайдите в каталог src/app и откройте файл app.module.ts. Затем добавьте следующие строки в файл app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Шаг 4 - Создание формы в файле представления

В этом шаге мы создадим простую форму для приема 10-значного номера телефона или мобильного телефона в приложении Angular. Для этого зайдите в src/app/ и app.component.html и обновите в нем следующий код:

<form [formGroup]="registerForm" (ngSubmit)="onsubmit()">
    <div class="col-md-4">
        <div class="form-group">
            <label for="">ВАШ НОМЕР ТЕЛЕФОНА</label>
            <input (keypress)="keyPress($event)" required type="text" formControlName="phonenumber" class="form-control" placeholder="Введите свой номер телефона" [ngClass]="{ 'is-invalid': submitted && f.phonenumber.errors }">
            <div *ngIf="submitted && f.phonenumber.errors" class="invalid-feedback">
                <div *ngIf="f.phonenumber.errors.required">Номер телефона обязателен</div>
                <div *ngIf="f.phonenumber.errors.pattern || f.phonenumber.errors.maxlength || f.phonenumber.errors.minlength">Номер телефона должен состоять не менее чем из 10 цифр</div>
            </div>
        </div>
    </div>
    <input type="submit" class="mw-ui-btn" value="Submit">
</form>

Шаг 5 - Добавьте код в файл app.Component ts

Перейдите в каталог src/app и откройте файл app.component.ts. Затем добавьте следующий код в файл:

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
    
export class AppComponent {
    registerForm: FormGroup;
    submitted = false;
    constructor(private formBuilder: FormBuilder) { }
 
    //only number will be add
    keyPress(event: any) {
        const pattern = /[0-9\+\-\ ]/;
    
        let inputChar = String.fromCharCode(event.charCode);
        if (event.keyCode != 8 && !pattern.test(inputChar)) {
        event.preventDefault();
        }
    }
 
    ngOnInit() {
        this.registerForm = this.formBuilder.group({
        phonenumber: ['', [ Validators.required,
            Validators.pattern("^[0-9]*$"),
            Validators.minLength(10), Validators.maxLength(10)]]
        });
    }
    
    // convenience getter for easy access to form fields
    get f() { return this.registerForm.controls; }
    onsubmit() {
        this.submitted = true;
        // stop here if form is invalid
        if (this.registerForm.invalid) {
            return;
        }
    }
    
}

Шаг 6 - Запуск приложения Angular

На этом шаге выполните следующую команду в терминале для запуска приложения Angular для проверки номера телефона:

ng serve

Вывод

Из этого руководства мы узнали, как проверить 10-значные телефонные/мобильные номера в приложениях на Angular 14.