Template-Driven Form

Photo by Wesley Tingey on Unsplash

Form တွေ valid ဖြစ်မဖြစ် လိုချင်တဲ့ data ဟုတ်မဟုတ် စစ်ဖို့ Angular မှာ နည်းလမ်းအမျိုးမျိုးရှိပါတယ်။ အဲ့ဒီထဲက Template-Driven နဲ့ form control လုပ်နည်းကို လေ့လာကြပါမယ်။

Template-Driven Form ဆိုတာ template ထဲမှာတိုက်ရိုက် control လုပ်တဲ့ နည်းလမ်းဖြစ်ပါတယ်။ အသုံးပြုနိုင်ဖို့အတွက် FormsModule ကို AppModule ထဲမှာ အခုလို import လုပ်ပေးထားဖို့ လိုအပ်ပါတယ်။

@NgModule({
imports: [FormsModule, ...],
...
})
export class AppModule {}

အရင်ဆုံး FormDemo component ကို 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'];

run လိုက်ရင် အခုလို ရလဒ်တွေ့ရမှာ ဖြစ်ပါတယ်။

Sample Form

Angular က <form> tag ကိုတွေ့ရင် control လုပ်နိုင်ဖို့ နောက်ကွယ်မှာ အလိုလျှောက် JS obj တစ်ခုဆောက်ပေးပါတယ်။ ဒါပေမဲ့ form ထဲက ဘယ် input field တွေကို control လုပ်ချင်လဲ ဆိုတာကတော့ ကိုယ်တိုင်သတ်မှတ်ပေးမှ ရပါမယ်။

ဒီလိုသတ်မှတ်ဖို့အတွက် control လုပ်စေချင်တဲ့ input field တွေမှာ ngModel နဲ့ name ကို ထည့်ပေးရပါမယ်။

<form>
  <div class="form-group">
    <label>Username</label>
    <input type="text" class="form-control" ngModel name="username" />
  </div>
  <div class="form-group">
    <label>Mail</label>
    <input type="email" class="form-control" ngModel name="email" />
  </div>
  <div class="form-group">
    <label>Secret Questions</label>
    <select class="form-control" ngModel name="secret">
      <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" ngModel name="gender" />
      {{ gender }}
    </label>
  </div>
  <br />
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

အခုလို သတ်မှတ်ပြီးရင် Angular ကတည်ဆောက်ပေးထားတဲ့ JS obj ကို ရယူဖို့ပဲ ကျန်ပါတော့တယ်။ နမူနာအရ Submit button ကိုနှိပ်မယ်ဆိုရင် data ကိုရယူမှာ ဖြစ်ပါတယ်။

Data ရယူဖို့အတွက် form tag မှာအခုလိုရေးပါ။

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
...
</form>

ထူးခြားချက်ကတော့ Submit button မှာ (click) event နဲ့ ရယူတာမဟုတ်ပဲ form tag မှာ (ngSubmit) နဲ့ ရယူလိုက်တာ တွေ့ရမှာပါ။ ဒီလိုရယူနိုင်ဖို့အတွက် Submit button က type=submit ပေးထားဖို့ လိုအပ်ပါတယ်။

#f ဆိုတာ local reference တစ်ခုဖြစ်ပါတယ်။ သူ့ထဲကို assign ထည့်လိုက်တာကတော့ ngForm ပါ။ ngForm ဆိုတာ Angular က အလိုလျှောက် ဆောက်ပေးထားတဲ့ JS Obj ပဲဖြစ်ပါတယ်။

ဆက်လက်ပြီး typescript ဘက်မှာ အောက်ပါအတိုင်းရေးပါ။

onSubmit(form: NgForm) {
    console.log(form);
}

Form မှာ data ဖြည့်ပြီး Submit နှိပ်လိုက်ရင် အခုလို တွေ့ရမှာဖြစ်ပါတယ်။

ngForm Object

ရရှိလာတဲ့ Obj ထဲက value ကိုဖွင့်ကြည့်လိုက်ရင် form ထဲကဖြည့်လိုက်တဲ့ data တွေကို မြင်တွေ့ရမှာဖြစ်ပါတယ်။ ဒါ့အပြင် တခြားအသုံးဝင်တဲ့ properties တွေလည်းပါဝင်နေတာ မြင်တွေ့ရမှာပါ။ ဥပမာ valid, invalid, touched တို့ကိုသုံးပြီး form valid ဖြစ်မဖြစ် အလွယ်တကူ စစ်နိုင်မှာပါ။

Form Validation

Form validation လုပ်ဖို့အတွက် Username နဲ့ Email တို့ရဲ့ input field တွေမှာ အခုလိုရေးပါ။

<input type="text" class="form-control" ngModel name="username" required />
<input type="email" class="form-control" ngModel name="email"
required email/>

တခြားသော validators များကို ဒီမှာ လေ့လာပါ။

Form ကို ဘာ data မှမဖြည့်ပဲ Submit နှိပ်ရင် valid: false လို့ပြနေမှာ ဖြစ်ပါတယ်။ Username နဲ့ Email တို့ကို မှန်ကန်စွာဖြည့်မှ valid: trueဖြစ်စေမှာပါ။

Form with invalid value

Form ကို valid ဖြစ်မှ Submit လုပ်ခွင့်ပြုစေဖို့ အခုလို ရေးလိုက်ပါ။

<button class="btn btn-primary" type="submit" [disabled]="f.invalid"> Submit </button>

f.invalid ကိုစစ်ပြီး ရေးထားတာ ဖြစ်ပါတယ်။ ဒီနေရာမှာ !f.valid လို့သုံးချင်လည်းရပါတယ်။ ရလဒ် အနေနဲ့ data မှန်တော့မှ Submit နှိပ်လို့ရမှာ ဖြစ်ပါတယ်။

Form with Validation

Outputting Validation Error

Field တစ်ခုဆီမှာ မှားယွင်းတဲ့ data ထည့်ရင် အသုံးပြုသူကို မှားယွင်းနေကြောင်းအသိပေးနိုင်ဖို့ အောက်ပါအဆင့်တွေ လုပ်နိုင်ပါတယ်။

Angular က Form control လုပ်ဖို့ JS Obj ဆောက်ပေးတဲ့အပြင် field တစ်ခုချင်းမှာလည်း သက်ဆိုင်ရာ css class တွေကို အလိုလျှောက် ထည့်ပေးပါသေးတယ်။

Input filed တစ်ခုကို inspect လုပ်ကြည့်ရင် အခုလို တွေ့ရမှာပါ။

Username’s input with invalid data

မှန်ကန်တဲ့ data ထည့်လိုက်ရင် အခုလို တွေ့ရမှာပါ။

Username’s input with valid data

Input field တွေကို မျိုးစုံစမ်းကြည့်ပါ css class တွေပြောင်းသွားတာ တွေ့ရမှာပါ။ ဒီလိုပြောင်းသွားတာကို အသုံးချဖို့ scss file မှာ အောက်ပါအတိုင်း ရေးလိုက်ပါ။

input.ng-touched.ng-invalid {
  border: 1px solid red;
}

ဒါဆိုရင်တော့ cursor ချပြီး data အမှန်မထည့်ရင် ယခုလို ပြမှာ ဖြစ်ပါတယ်။

Form with invalid inputs

ဆက်လက်ပြီး သက်ဆိုင်ရာ error message ပြပေးဖို့အတွက် အောက်ပါ code တွေရေးပါ။

Username အတွက် ဒီလိုရေးပါ။

<input
      type="text"
      class="form-control"
      ngModel
      name="username"
      required
      #username="ngModel"
    />
<span class="form-text" 
      *ngIf="username.invalid && username.touched"
    >
    Please enter a username!</span>

local reference ထဲကို ngModel ထည့်လိုက်ချင်းဖြင့် field တစ်ခုချင်းဆီကို control လုပ်လို့ ရသွားစေပါတယ်။

Email အတွက်လည်း ဆင်တူပဲဖြစ်ပါတယ်။

<input
      type="email"
      class="form-control"
      ngModel
      name="email"
      required
      email
      #email="ngModel"
    />
<span class="form-text" 
      *ngIf="email.invalid && email.touched"
      >Please enter a valid email!</span>

ဒါဆိုရင်တော့ အခုလို ရလဒ်မျိုးရစေမှာပါ။

Form with error messages

ဒီနည်းနဲ့ input field တစ်ခုချင်းဆီကို ထိန်းချုပ်နိုင်မှာ ဖြစ်ပါတယ်။

Set Default Values

အခုဆိုရင် form ရဲ့ select box နဲ့ radio button တို့မှာ default အနေနဲ့ ရွေးပေးထားတာမရှိသေးပါ။

Default သတ်မှတ်ပေးနိုင်ဖို့ အောက်ပါအတိုင်း ရေးလိုက်ပါ။

TypeScript
defaultSecret = 'pet';
defaultGender = 'male';
HTML
<select class="form-control" [ngModel]="defaultSecret" name="secret">...</select>
<input type="radio" [value]="gender" name="gender [ngModel]="defaultGender" />

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

Form with default values

Getting Form Data

ဆက်လက်ပြီး form က data တွေကို ရယူဖို့အတွက် အောက်ပါတို့ကို ရေးပါ။

onSubmit(form: NgForm) {
    console.log(form);
    console.log('Username: ' + form.value.username);
    console.log('Email: ' + form.value.email);
    console.log('Secret Question: ' + form.value.secret);
    console.log('Gender: ' + form.value.gender);
}

ဒါဆိုရင်တော့ Submit လုပ်ရင် အခုလို မြင်တွေ့ရမှာပါ။

Form Data

Resetting Form Data

Submit လုပ်ပြီး form reset လုပ်ချင်ရင် အခုလို ရေးလိုက်ပါ။

onSubmit(form: NgForm) {
...
form.reset();
}

အကယ်၍ default value တွေပါ မပျက်သွားစေချင်ရင် အခုလို ရေးနိုင်ပါတယ်။

onSubmit(form: NgForm) {
...
form.reset({
      secret: this.defaultSecret, 
      gender: this.defaultGender,
});
}

ဒီလောက်ဆိုရင် Tempate-Driven form ကိုအသုံးပြုပြီး control လုပ်လို့ ရပြီပဲ ဖြစ်ပါတယ်။

Previous: Built-in Pipes

Next: Reactive Form