שיעור 18 באנגולר (angular) – טפסים, ngModel, ואירועי מקלדת

  • בפוסט הזה אני רוצה להדגים יכולת חשובה של אנגולר – כיצד לטפל בטפסים.
  • לפני שאני מציג את הטפסים, נציג המחשה קטנה של אירועי מקלדת, כי את אותו רעיון אני אציג אחר כך עם הטפסים.
  • הרעיון הוא להציג את הקלט המוקלד, תוך כדי הקלדה.

המחשה של אירועי מקלדת באנגולר

הקוד הבא מציג את הטקסט המוקלד בשדה, תוך כדי הקלדה.

הוא משתמש באירוע keyup, וב-data binding על מנת לעשות זאת.

import { Component } from '@angular/core';

@Component({
 selector: 'app-keyup2',
 template: `
 <h1> keyup demo</h1>
 <input type="text"
 (keyup)="changeText($event)">
 <hr>
 <h1>Your Text is : {{ text }}</h1>
 
 
 `
})
export class Keyup2Component {
 text:string = '';

 changeText(event) {
 this.text = event.target.value;
 }
}

טפסים ושימוש ב-ngModel באנגולר

  • הדרך הקודמת שהצגתי הייתה מעט גולמית, היות וממש טיפלנו באירוע המקלדת
  • יש דרך יותר אלגנטית לעשות זאת, אם נרתום לטובתינו את מודל הטפסים של אנגולר.
  • בקוד הבא, אני מייבא את ngModel ( גם ב app.module.ts, וגם בקלאס של הקומפוננט שלי )
  • לאחר מכן , בכל שדה של טופס שאני יוצר, אני קושר אליו משתנה מסויים במחלקה באמצעות [(ngModel)]
  • וכך אנחנו נהנים מ-data binding ל-2 הכיוונים.
---- in app.module.ts file -----------

import {FormsModule } from '@angular/forms';
...
...
 imports: [
 BrowserModule,
 FormsModule,
 HttpModule,
 RouterModule.forRoot(appRoutes)
 ],

 
---- in my component ts file -------------------
import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-ngmodel22',
 template:`
 <h1> ng model demo</h1>

 <form>
 <label>your name : </label> 
 <input type="text" name="name" [(ngModel)]="name">

 <br><br>
 <label>your age : </label> 
 <input type="text" name="age" [(ngModel)]="age">
 <br><br>
 <input type="submit" value="submit">
 </form>
 
 <hr>
 <h1>Your Name : {{name}}</h1>
 <h1>Your Age : {{age }}</h1>
 `
})
export class Ngmodel22Component implements OnInit {

 name:string = 'Eyal';
 age:number = 20;

 constructor() { }

 ngOnInit() {
 }

}

אירוע של Sumbit עבור טופס

  • בדוגמא הזו ניתן לראות שאירוע ה-submit מטופל בתוספת קטנה בתגית ה–form שמפנה אל פונקציה בקלאס.
  • אומנם בדוגמא הנוכחית, התוכן לא נשלח לשום מקום, אלא רק מתווסף אל רשימה בתחתית המסך.
import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-formss2',
 template:`
 <form (submit)="onSubmit()">
 <div class="form-group">
 <label>Name</label>
 <input type="text" class="form-control" 
 [(ngModel)]="name" name="name">
 </div>
 <input type="submit" class="btn btn-success" value="Submit">
 </form>
 <hr>
 <ul class="list-group">
 <li class="list-group-item"
 *ngFor="let user of users">{{ user}}</li>
 </ul>
 
 
 `
})

export class Formss2Component implements OnInit {

 name:string = '';
 users:string[] = ['Bubu','Momo','Koko'];
 constructor() { }

 ngOnInit() {
 }

 onSubmit(){
 // console.log(this.name);
 this.users.push(this.name);
 this.name = '';
 }
}

שימוש בטפסים מבוססי תבנית באנגולר + וולידציה של טפסים באנגולר

בטופס הבא צריך לשים לב לכמה נקודות:

    • בכל שדה הגדרנו את השיוך ל ngModel
    • וגם הגדרנו עבורו id שמפנה ל ngModel
    • וגם הגדרנו בראש הטופס #f  עבור הטופס כולו – שמוצמד ל ngForm
  • בנוגע לוולידציה :
    • הגדרנו div מיוחדים עם הודעות השגיאה, שבאמצעות ngIf* יודעים להגיב לשגיאות.
  • בנוגע לפעולת ה-submit של הטופס, קיבלנו אובייקט שמכיל 2 משתנים,משתנה אחד הוא ערך בוליאני – האם הוולידציה עברה או לא, ומשתנה שני מכיל אובייקט עם תוכן הטופס.
 import { Component, OnInit } from '@angular/core';

 @Component({
 selector: 'app-forms-model33',
 template:`
 <form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
 <div class="form-group">
 <label>Name</label>
 <input class="form-control" type="text" [(ngModel)]="user.name"
 name="name"
 #userName="ngModel"
 minlength="2"
 required
 >
 </div>
 <div *ngIf="userName.errors?.required && userName.touched" class="alert alert-danger">שם נדרש</div>
 <div *ngIf="userName.errors?.minlength && userName.touched" class="alert alert-danger">לפחות 2 אותיות נדרשות</div>
 <div class="form-group">
 <label>Email</label>
 <input class="form-control" type="text" [(ngModel)]="user.email"
 name="email"
 #userEmail="ngModel"
 
 required
 >
 <div *ngIf="userEmail.errors?.required && userEmail.touched" class="alert alert-danger">אימייל נדרש</div>
 
 </div>
 <div class="form-group">
 <label>Phone</label>
 <input class="form-control" type="text" [(ngModel)]="user.phone"
 name="phone"
 #userPhone="ngModel"
 minlength="10"
 >
 <div *ngIf="userPhone.errors?.minlength && userPhone.touched" class="alert alert-danger">טלפון של 10 ספרות לפחות </div>
 
 </div>

 <input type="submit" value="Submit" class="btn btn-success">
 </form>
 
 
 `
 })
 export class FormsModel33Component implements OnInit {
 
 user = {name: '' , email: '' , phone : 0 };

 constructor() { }

 ngOnInit() {
 }
 
 onSubmit({value,valid}) {
 if(valid){
 console.log(value);
 }else{
 console.log("Form is invalid");

 }
 }

 }

 

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *