Angular ফর্মের জন্য দুটি পদ্ধতি প্রদান করে। টেমপ্লেট-চালিত ফর্ম সহজ এবং HTML-তে সংজ্ঞায়িত; প্রতিক্রিয়াশীল ফর্ম TypeScript-এ সংজ্ঞায়িত এবং আরও নিয়ন্ত্রণ প্রদান করে — জটিল, গতিশীল, বা ব্যাপকভাবে যাচাইকৃত ফর্মের জন্য ভাল।
// just import FormsModule; minimal TS
Submit
ফর্ম কাঠামো এবং যাচাইকরণ ngModel নির্দেশাবলী মাধ্যমে টেমপ্লেট-এ থাকে। সেটআপ করা সহজ, কিন্তু ফর্ম মডেল অন্তর্নিহিত এবং প্রোগ্রামেটিকভাবে পরীক্ষা/পরিচালনা করা কঠিন।
import { FormBuilder, Validators } from "@angular/forms";
export class SignupComponent {
constructor(private fb: FormBuilder) {}
form = this.fb.group({
email: ["", [Validators.required, Validators.email]],
password: ["", [Validators.required, Validators.minLength(8)]],
});
onSubmit() {
if (this.form.valid) console.log(this.form.value);
}
}
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="email" />
<input formControlName="password" type="password" />
<button [disabled]="form.invalid">Submit</button>
</form>
ফর্ম একটি স্পষ্ট অবজেক্ট (FormGroup/FormControl) যা আপনি TS-তে তৈরি করেন। এটি এটিকে পর্যবেক্ষণযোগ্য, পরীক্ষাযোগ্য এবং পরিচালনা করা সহজ করে তোলে (ক্ষেত্র যোগ/অপসারণ করুন, valueChanges এর মাধ্যমে পরিবর্তনের প্রতিক্রিয়া জানান)।
Template-driven Reactive
Where defined HTML (ngModel) TypeScript (FormBuilder)
Form model implicit/async explicit, synchronous object
Validation directives in template validators in code
Dynamic forms hard easy (add/remove controls in code)
Testability harder straightforward (it's just an object)
Best for simple forms complex/dynamic/validated forms
this.form.get("email")!.valueChanges.subscribe(v => ...); // react to changes
this.form.valid; // synchronous validity check
সঠিক ফর্ম পদ্ধতি নির্বাচন রক্ষণাবেক্ষণের জন্য গুরুত্বপূর্ণ: দ্রুত, সহজ ফর্মের জন্য টেমপ্লেট-চালিত; যেকোনো জটিল কিছুর জন্য প্রতিক্রিয়াশীল — বহু-পদক্ষেপ উইজার্ড, গতিশীল ক্ষেত্র সেট, ক্রস-ক্ষেত্র যাচাইকরণ, বা ইউনিট পরীক্ষা প্রয়োজন এমন ফর্ম।
প্রতিক্রিয়াশীল ফর্মের স্পষ্ট, পর্যবেক্ষণযোগ্য মডেল সাধারণত গুরুতর অ্যাপ্লিকেশনে পছন্দনীয় কারণ এটি আরও শক্তিশালী, পরীক্ষাযোগ্য এবং স্কেলেবল, যদিও এটি শুরুতে আরও কোড প্রয়োজন।