Skip to main content

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>