ng generate component username-checker-form

<app-username-checker-form> </app-username-checker-form>

.container {
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      height: 100vh;
}
    
.card {
      width: 50%;
      background-color: peachpuff;
      border-radius: 1rem;
      padding: 1rem;
}
    
input {
      border: 3px solid #1a659e;
      border-radius: 5px;
      height: 50px;
      line-height: normal;
      color: #1a659e;
      display: block;
      width: 100%;
      box-sizing: border-box;
      user-select: auto;
      font-size: 16px;
      padding: 0 6px;
      padding-left: 12px;
}
    
input:focus {
      border: 3px solid #004e89;
}
    
.btn {
      display: block;
      outline: 0;
      cursor: pointer;
      border: 2px solid #1a659e;
      border-radius: 3px;
      color: #fff;
      background: #1a659e;
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
      padding: 12px 20px;
      width: 100%;
      margin-top: 1rem;
}
    
.btn:hover {
      background: #004e89;
      border: #004e89;
}
    
.success {
      color: #14ae83;
}
    
.error {
      color: #fd536d;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");
    
body {
      font-family: "Poppins";
      background-color: papayawhip;
      color: #1a659e;
}

<div class="container">
    <div class="card">
        <h1> Username Checker </h1>
    
        <form>
          <input
            type="text"
            id="username"
            name="username"
            placeholder="Please enter a username"
          />
          <button class="btn"> Save </button>
        </form>
    
    </div>
</div>

ng serve

ارسال داده بین فایل های HTML و TypeScript

از اتصال دو طرفه برای ارسال داده به فایل .ts و بازگشت به فایل html استفاده کنید. این کار با استفاده از ngModel در تگ های ورودی فرم امکان پذیر است.

1. FormsModule را به فایل app.module.ts وارد کنید و آن را به آرایه imports اضافه کنید:import { FormsModule } from ‘@angular/forms’; @NgModule({        //…         واردات: [            // سایر واردات            FormsModule         ]،       //…})
2. یک متغیر کلاس نام کاربری را در فایل ts اعلان کنید، username-checker-form.component.ts:username: string = ”;
3. در username-checker-form.component.html، [(ngModel)] را با متغیر نام کاربری در تگ ورودی اضافه کنید. این کار اتصال دو طرفه را فعال می‌کند و هر چیزی که در ورودی نام کاربری فرم تایپ شود به متغیر نام کاربری در فایل .ts اختصاص داده می‌شود. نام کاربری”      [(ngModel)]=”username”/>
4. برای آزمایش ارسال داده ها به فایل ts، یک متد save() در username-checker-form.component.ts ایجاد کنید. وقتی فرم را ارسال می‌کنید، برنامه این function.save(): void {    console.log(this.username) را فراخوانی می‌کند.
5. دستور ngSubmit را به تگ های
   
   در username-checker-form.component.html اضافه کنید و متد save() را فراخوانی کنید.

6. با کلیک بر روی دکمه Save، تابع save() مقدار وارد شده در قسمت ورودی را در کنسول چاپ می کند. می توانید کنسول را در زمان اجرا با استفاده از ابزارهای توسعه دهنده مرورگر مشاهده کنید. اگر با مرورگر DevTools یا مشاهده کنسول آشنا نیستید، می‌توانید درباره نحوه استفاده از Chrome DevTools اطلاعات بیشتری کسب کنید.
7. نام کاربری را به فایل html برگردانید. متغیر نام کاربری را بین پرانتزهای فرفری به فایل username-checker-form.component.html، بعد از تگ‌های
   اضافه کنید. برای نمایش مقدار ذخیره شده در متغیر نام کاربری از براکت های فرفری استفاده کنید.

   نام کاربری وارد شده: {{ username }}

   فرم باید داده های وارد شده همزمان را نشان دهد.

8. در username-checker-form.component.ts، چند متغیر کلاس اضافه کنید تا بررسی کنید که آیا نام کاربری از قبل وجود دارد یا خیر. یک آرایه نام کاربری با چند نام کاربری گرفته شده اعلام کنید و یک رشته پیام اضافه کنید که کاربر را از بررسی مطلع می کند. متغیر isValidUsername درست است اگر نام کاربری وارد شده در آرایه نام کاربری نباشد.usernames: string[] = [ ‘bart’, ‘lisa’, ‘fry’, ‘leela’ ];message: string = ”;isValidUsername: boolean = نادرست
9. متد save() باید بررسی کند که آیا نام کاربری وارد شده از قبل در آرایه نام کاربری موجود است یا خیر. بسته به نتیجه، پیام بر این اساس تنظیم می‌شود.save(): void {    if (this.username != ”) {        this.isValidUsername = !this.usernames.includes(          this.username (.  )؛ if (this.isValidUsername) {          this.message = `نام کاربری جدید شما ‘${this.username}’ است; } else {          this.message = ‘نام کاربری ‘${this.username}’ قبلاً گرفته شده است’; }    }}
10. با نشان دادن وجود یا عدم وجود نام کاربری وارد شده، فایل username-checker-form.component.html را تکمیل کنید. یک پیام خطا در زیر تگ های
    

    بعد از فرم اضافه کنید. متغیر isValidUsername در اینجا برای تعیین رنگ پیام نمایش داده شده مفید است.

               {{ message }}

11. در مرورگر خود در localhost:4200، سعی کنید یک نام کاربری را وارد کنید که در آرایه نام های کاربری وجود دارد: سپس، سعی کنید نام کاربری را وارد کنید که ندارد.

import { FormsModule } from '@angular/forms';
    
@NgModule({
        //...
        imports: [
            // other imports
            FormsModule
        ],
        //...
})

username: string = '';

<input
      type="text"
      id="username"
      name="username"
      placeholder="Please enter a username"
      [(ngModel)]="username"
/>

save(): void {
    console.log(this.username);
}

<form (ngSubmit)="save()">

<h2 *ngIf="username"> Username entered: {{ username }} </h2>

usernames: string[] = [ 'bart', 'lisa', 'fry', 'leela' ];
message: string = '';
isValidUsername: boolean = false;

save(): void {
    if (this.username != '') {
        this.isValidUsername = !this.usernames.includes(
          this.username.toLowerCase()
        );
    
        if (this.isValidUsername) {
          this.message = `Your new username is '${this.username}'`;
        } else {
          this.message = `The username '${this.username}' has already been taken`;
        }
    }
}

<p *ngIf="username" [ngClass]="isValidUsername ? 'success' : 'error'">
          {{ message }}
</p>

استفاده از Binding دو طرفه برای ارسال داده در هنگام توسعه یک برنامه

اتصال دو طرفه برای اعتبارسنجی، بررسی، محاسبات و موارد دیگر مفید است. این اجازه می دهد تا اجزای سازنده ارتباط برقرار کنند و داده ها را در زمان واقعی به اشتراک بگذارند.

می توانید از ویژگی های اتصال دو طرفه در قسمت های مختلف یک برنامه استفاده کنید. هنگامی که داده ها را از کاربر دریافت کردید، می توانید منطق تجاری را اجرا کنید و نتایج را به کاربر اطلاع دهید.

گاهی اوقات، شما می خواهید داده های کاربر را در یک پایگاه داده ذخیره کنید. می توانید انواع مختلفی از ارائه دهندگان پایگاه داده را که می توانید استفاده کنید، از جمله پایگاه داده Firebase NoSQL را بررسی کنید.

منبع مقاله