Form builder
בלי Form builder, לכל שדה שאנחנו מגדירים צריכים להשתמש במילה new.
comp.ts
contactForm: FormGroup = new FormGroup({
presonalDetails: new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
email: new FormControl(''),
}),
message: new FormControl(''),
subjects: new FormArray([
new FormControl(null),
])
});
עם Form builder ההגדרה של הטופס נקייה יותר.
comp.ts
constructor(private formBuilder: FormBuilder){}
public contactForm: FormGroup = new FormGroup({});
ngOnInit() {
this.contactForm = this.formBuilder.group({
presonalDetails: this.formBuilder.group({
firstName: ['', Validators.required],
lastName: '',
email: '',
}),
message: ''
});
}
כדי להשתמש ב-Form builder צריך לייבוא לתוך ה-app.module את הספרייה:
comp.ts
import{ FormsModule, ReactiveFormsModule} from'@angular/forms';
ולהוסיף אותה ל-import.
שדה select
כדי להוסיף שדה sekect עם ערכים בתוכו נגדיר את השדה בטופס שלנו:
comp.ts
constructor(private formBuilder: FormBuilder){}
public contactForm: FormGroup = new FormGroup({});
ngOnInit() {
this.contactForm = this.formBuilder.group({
firstName: ['', Validators.required],
country: ['', [Validators.required]],
});
}
get firstname() {
return this.contactForm.get('firstname');
}
get country() {
return this.contactForm.get('country');
}
countryList: country[] = [
new country("1", "India"),
new country('2', 'USA'),
new country('3', 'England')
];
export class country {
id: string;
name: string;
constructor(id: string, name: string) {
this.id = id;
this.name = name;
}
}
בטופס עצמו:
comp.html
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate>
<p>
<label for="firstname">First Name </label>
<input type="text" id="firstname" name="firstname" formControlName="firstname">
</p>
<div
*ngIf="!firstname?.valid && (firstname?.dirty ||firstname?.touched)">
<div [hidden]="!firstname.errors.required">
First Name is required
</div>
</div>
<p>
<label for="country">country </label>
<select id="country" name="country" formControlName="country">
<option [ngValue]="c.id" *ngFor="let c of countryList">
{{c.name}}
</option>
</select>
</p>
<div *ngIf="!country.valid && (country.dirty || country.touched)">
<div [hidden]="!country.errors.required">
country is required
</div>
</div>
<p>
<button type="submit" [disabled]="!contactForm.valid">Submit</button>
</p>
</form>
לבדיקת הסטטוס של הטופס אפשר לשים את הקוד הבא אחרי הטופס ב-html:
comp.html
<div style="float: right; width:50%;">
<h3>Form Status</h3>
<b>valid : </b>{{contactForm.valid}}
<b>invalid : </b>{{contactForm.invalid}}
<b>touched : </b>{{contactForm.touched}}
<b>untouched : </b>{{contactForm.untouched}}
<b>pristine : </b>{{contactForm.pristine}}
<b>dirty : </b>{{contactForm.dirty}}
<b>disabled : </b>{{contactForm.disabled}}
<b>enabled : </b>{{contactForm.enabled}}
<h3>Form Value</h3>
{{contactForm.value |json}}
</div>