Reactive Form

Photo by NeONBRAND on Unsplash

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'];

အခုလိုရလဒ် မျိုးရလာမှာပါ။

Simple form

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 နှိပ်လိုက်ရင် အခုလို တွေ့ရမှာပါ။

Form’s data

ဒီနည်းနဲ့ အလွယ်တကူ 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 တွေထုတ်ကာ စစ်ထားတာ ဖြစ်ပါတယ်။

Form with validation

ဒီနည်းနဲ့အခုလို အလွယ်တကူ validation ပြုလုပ်နိုင်မှာ ဖြစ်ပါတယ်။

Submit လုပ်ပြီ form ကို reset လုပ်ချင်ရင် ယခုလို လုပ်နိုင်ပါတယ်။

onSubmit() {
this.signupForm.reset({
      secret: 'pet',
      gender: 'male',
    });
}

ဒါဆိုရင်တော့ Reactive Form ကိုသုံးပြီး form တွေကို control လုပ်နိုင်ပြီပဲ ဖြစ်ပါတယ်။

Previous: Template-Driven Form