אפשרויות רבות מתאפשרות בעבודה עם reactive forms , ולמעשה כל האפשרויות הללו מגיעות מהאינסטנס של AbstractControl. שמביא איתו את כל ההגדרות לתוך הטופס שלנו.
אני לא אפרט על כל האפשרוויות המוצאות לנו, אך כן אציין את החשובות, שכן נתקלים בהם בעבודה למשל עם טופס דינאמי או מורכבויות כאלו או אחרות שיכולים להיות בעבודה עם טפסים.
רשימת תכונות חשובות של AbstractControl
- value – מדפיס את המידע הקיים בטופס.
- validators – משמש בכדי להגדיר ולידציות לכל פקד
- valid – מחזיר תשובה בוליאנית. אם הטופס ולידי יחזיר true.
- invalid – מחזיר תשובה בוליאנית. אם הטופס לא ולידי יחזיר true.
- pristine \ dirty \ touched \ untouched – מחזירים תשובה בולאנית, כמו כן מאפשרים לנו לייצר חיוויים שונים בUI . למשל אם המשתמש נגע בשדה אבל לא מילא נוכל להציג חיווי מתאים. כמו כן אנגולר גם מוסיף קלאסים בHTML בהתאמה כך שתוכלו גם להשפיע על הקלאסים בCSS.
- setValue – להגדיר מראש תוכן שיוצג בטופס. לדוגמה בעריכה, אפשר לטעון את המידע הקיים לפקדים.
- reset – מחיקה\נקיון של הטופס. שימושי אם קיים כפתור "נקה טופס" וכו..
- get – מאפשר לנו לגשת לcontol ילד על ידי ציון השם של אותו control. (מזכיר קצת כשרוצים לגשת לערך כלשהו באובייקט).
דוגמה לשימוש ב- value
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
<label>
שם פרטי:
<input type="text" formControlName="firstName">
</label>
<label>
שם משפחה:
<input type="text" formControlName="lastName">
</label>
<button type="submit">אישור</button>
</form>
<div>{{myForm.value}}}</div>
<!--
ידפיס את המידע בטופס , לדוגמא:
{
firstName: tanin,
lastName: code
}
>דוגמה לשימוש ב- validator
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-profile-editor',
templateUrl: './profile-editor.component.html',
styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent implements OnInit{
public myForm : FormGroup;
constuctor() {};
ngOnInit(){
this.myForm = new FormGroup({
firstName: new FormControl('',Validators.required),
lastName: new FormControl('',[Validators.required, Validators.maxLength(4)]),
});
};
onSubmit(form: FormGroup) {
console.log(form.value)
}דוגמה לשימוש ב- invalid/valid
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
<label>
שם פרטי:
<input type="text" formControlName="firstName">
</label>
<label>
שם משפחה:
<input type="text" formControlName="lastName">
<span *ngIf="lastName.valid">שם המשפחה אכן תקין</span>
</label>
<button [disabled]="form.invalid" type="submit">אישור</button>
</form>
דוגמה לשימוש ב- pristine \ dirty \ touched \ untouched
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
<label>
שם פרטי:
<input type="text" formControlName="firstName">
</label>
<label>
שם משפחה:
<input type="text" formControlName="lastName">
<div class="form-control-feedback"
*ngIf=" lastName.dirty || lastName.touched">
<span>חובה לשים שם משפחה בקיצור של עד 4 אותיות</span>
</div>
</label>
<button [disabled]="form.invalid" type="submit">אישור</button>
</form>דוגמה לשימוש ב- setValue
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-profile-editor',
templateUrl: './profile-editor.component.html',
styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent implements OnInit{
public myForm : FormGroup;
constuctor() {};
ngOnInit(){
this.myForm = new FormGroup({
firstName: new FormControl('',Validators.required),
lastName: new FormControl('',[Validators.required, Validators.maxLength(4)]),
});
// אפשר להזין ערכים לתוך שדה ספציפי
this.newForm.controls.firstName.setValue('tanin');
// אפשר להזין ערכים לתוך כל השדות של הטופס
this.newForm.setValue({
firstName: 'tanin',
lastName: 'code'
});
};
onSubmit(form: FormGroup) {
console.log(form.value)
}דוגמה לשימוש ב- reset
<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
<label>
שם פרטי:
<input type="text" formControlName="firstName">
</label>
<label>
שם משפחה:
<input type="text" formControlName="lastName">
<div class="form-control-feedback"
*ngIf=" lastName.dirty || lastName.touched">
<span>חובה לשים שם משפחה בקיצור של עד 4 אותיות</span>
</div>
</label>
<button [disabled]="form.invalid" type="submit">אישור</button>
<button type="button" (click)="myForm.reset()" >נקה טופס</button>
</form>דוגמה לשימוש ב- get
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-profile-editor',
templateUrl: './profile-editor.component.html',
styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent implements OnInit{
public myForm : FormGroup;
constuctor() {};
ngOnInit(){
this.myForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
});
};
onSubmit(form: FormGroup) {
// לגשת לערך ספציפי בתוך אובייקט הטופס הריאקטיבי
let firstName = form.get('firstName').value;
console.log(form.value)
}סיכום שיעור
כמו כן יש עוד הרבה דברים מעניינים בעולם הטפסים הריקטיביים של אנגולר, עברנו על דברים בסיסיים שמשתמשים בהם המון. אבל כן יש עוד המון המון דברים, ולכן חשוב שנבין את שיטת העבודה ומפה יהיה קל יותר להמשיך ולהעמיק. אז קדימה , ממשיכים לשיעורים הבאים 🐊
