Form control လုပ်နိုင်ဖို့ ဒုတိယနည်းလမ်းဖြစ်တဲ့ Reactive Form ကိုလေ့လာရပါမယ်။ Reactive Form ဆိုတာ TypeScript ဘက်ကနေ Form ကိုအပြည့်အဝ ထိန်းချုပ်ပြီး Template နဲ့ sync လုပ်ပေးတဲ့နည်း ဖြစ်ပါတယ်။
အသုံးပြုဖို့အတွက် ReactiveFormsModule
ကို AppModule
မှာ import လုပ်ပေးထားဖို့လိုအပ်ပါတယ်။
import { ReactiveFormsModule } from '@angular/forms';@NgModule({
imports: [ ReactiveFormsModule ]
...
})
export class AppModule {}
ReactiveFormComponent
ကို generate လုပ်ပြီးအောက်ပါ code တွေကိုရေးပါ။
HTML
<form>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label>Mail</label>
<input type="email" class="form-control" />
</div>
<div class="form-group">
<label>Secret Questions</label>
<select class="form-control">
<option value="pet">Your first pet?</option>
<option value="teacher">Your first teacher?</option>
</select>
</div><div class="radio" *ngFor="let gender of genders">
<label>
<input type="radio" [value]="gender" name="gender" />
{{ gender }}
</label>
</div>
<br />
<button class="btn btn-primary" type="submit">Submit</button>
</form>TypeScript
genders = ['male', 'female'];
အခုလိုရလဒ် မျိုးရလာမှာပါ။
Reactive Form သည် TypeScript ကနေ control လုပ်တာဖြစ်လို့ အောက်ပါအတိုင်း FormGroup
ကိုအရင် initialize လုပ်ထားဖို့ လိုအပ်ပါတယ်။
signupForm!: FormGroup;ngOnInit() {
this.signupForm = new FormGroup({
username: new FormControl(null),
email: new FormControl(null),
secret: new FormControl('pet'),
gender: new FormControl('male'),
});
}
FormGroup
ဆိုတာ form ကို control လုပ်မဲ့ FormControl
တွေစုစည်းထားတဲ့ obj ဖြစ်ပါတယ်။ ဒါကြောင့် အဲ့ဒီထဲမှာ အသုံးပြုချင်တဲ့ FormControl
တွေကို ကြိုတင် သတ်မှတ်ထားတာ တွေ့နိုင်ပါတယ်။
FormControl
ရဲ့ first parameter မှာ input field အတွက် initialize value ကိုသတ်မှတ်နိုင်ပါတယ်။
ပြီးရင်တော့ သတ်မှတ်လိုက်တဲ့ FormGroup
ကို template နဲ့ ချိတ်ဆက်ပေးဖို့ အောက်ပါအတိုင်းရေးပါ။
<form [formGroup]="signupForm">
...
</form>
Angular ကို အလိုလျှောက် JS Obj မဆောက်ခိုင်းတော့ပဲ ကိုယ်တိုင်ဆောက်ထားတဲ့ FormGroup
ကို သုံးပေးဖို့ ပြောလိုက်တာ ဖြစ်ပါတယ်။
ဆက်လက်ပြီး FormControl
တွေကို input field တွေနဲ့ ချိတ်ဆက်ပေးပါ။
<input type="text" class="form-control" formControlName="username" /><input type="email" class="form-control" formControlName="email" /><select class="form-control" formControlName="secret">...</select><input type="radio" [value]="gender" name="gender"
formControlName="gender"
/>
formControlName
ဆိုတဲ့ directive နဲ့ သတ်မှတ်ခဲ့တဲ့ FormControl
တွေရဲ့ နံမည်ကိုထည့်ပေးလိုက်တာ တွေ့ရမှာပါ။
ဒါဆိုရင် form နဲ့ FormGroup
တို့ချိတ်ဆက်တာပြီးပါပြီ။ Submit လုပ်ရင် data ရယူဖို့အတွက် အောက်ပါအတိုင်းရေးပါ။
HTML
<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">...</form>TypeScript
onSubmit() {
console.log(this.signupForm);
console.log('Username: ' + this.signupForm.value.username);
console.log('Email: ' + this.signupForm.value.email);
console.log('Secret Question: ' + this.signupForm.value.secret);
console.log('Gender: ' + this.signupForm.value.gender);
}
Template-Driven ကဲ့သို့ ngSubmit
နဲ့ရယူလိုက်ပါတယ်။ ဒါပေမဲ့ local reference တွေတော့မလိုတော့ပါ။ Submit နှိပ်လိုက်ရင် အခုလို တွေ့ရမှာပါ။
ဒီနည်းနဲ့ အလွယ်တကူ data ရယူနိုင်မှာပဲ ဖြစ်ပါတယ်။
Form Validation
Validation သတ်မှတ်ဖို့ အခုလိုရေးပါ။
ngOnInit(): void {
this.signupForm = new FormGroup({
username: new FormControl(null, Validators.required),
email: new FormControl(null, [Validators.required,
Validators.email]),
...
});
}
FormControl
ရဲ့ second parameter မှာ Validators တွေ သတ်မှတ်နိုင်ပါတယ်။ တစ်ခုထပ်ပို သတ်မှတ်ချင်ရင် [ ]
နဲ့ ထည့်နိုင်ပါတယ်။
တခြား validators တွေကို ဒီမှာ လေ့လာနိုင်ပါတယ်။
ဆက်လက်ပြီး invalid data ဆိုရင် input field ကို error ဖြစ်နေကြောင်း မြင်သာအောင် ယခုလိုရေးပါ။
input.ng-touched.ng-invalid {
border: 1px solid red;
}
Error message ပြပေးနိုင်ဖို့ အခုလို ဆက်ရေးပါ။
<span
class="form-text"
*ngIf="
signupForm.get('username')!.invalid &&
signupForm.get('username')!.touched
"
>Please enter a username!</span
><span
class="form-text"
*ngIf="
signupForm.get('email')!.invalid &&
signupForm.get('email')!.touched
"
>Please enter a valid email!</span
>
signupForm
ကနေ get()
နဲ FormControl
ကိုဆွဲထုတ်ပြီး property တွေထုတ်ကာ စစ်ထားတာ ဖြစ်ပါတယ်။
ဒီနည်းနဲ့အခုလို အလွယ်တကူ validation ပြုလုပ်နိုင်မှာ ဖြစ်ပါတယ်။
Submit လုပ်ပြီ form ကို reset လုပ်ချင်ရင် ယခုလို လုပ်နိုင်ပါတယ်။
onSubmit() {
this.signupForm.reset({
secret: 'pet',
gender: 'male',
});
}
ဒါဆိုရင်တော့ Reactive Form ကိုသုံးပြီး form တွေကို control လုပ်နိုင်ပြီပဲ ဖြစ်ပါတယ်။
Previous: Template-Driven Form