Thuta Learning
ရှာဖွေရန်
IntermediateWeb Developmentintermediate

Reactive Forms

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

Reactive Forms များသည် TypeScript code ဖြင့် forms များကို programmatically တည်ဆောက်သည်။ Complex forms များအတွက် အကောင်းဆုံးဖြစ်သည်။

⚠️ Important: ReactiveFormsModule ကို import လုပ်ရမည်။

typescript
// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ReactiveFormsModule]
})

// component.ts
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class MyComponent implements OnInit {
  userForm: FormGroup;
  
  constructor(private fb: FormBuilder) {}
  
  ngOnInit() {
    this.userForm = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      age: ['', [Validators.required, Validators.min(18)]]
    });
  }
  
  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    }
  }
}

// component.html
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <input formControlName="name" placeholder="Name">
  <input formControlName="email" placeholder="Email">
  <input formControlName="age" type="number" placeholder="Age">
  <button [disabled]="!userForm.valid">Submit</button>
</form>
You should see
(Form သည် TypeScript ဖြင့် control လုပ်နိုင်ပြီး complex validations များ လွယ်ကူစွာ add လုပ်နိုင်သည်)
Reactive Forms | Thuta Learning