Angular படிவங்களுக்கு இரண்டு அணுகுமுறைகளை வழங்குகிறது. டெம்ப்ளேட்-இயக்கப்பட்ட படிவங்கள் எளிமையானவை மற்றும் HTML இல் வரையறுக்கப்பட்டுள்ளன; வினைத்திறன் படிவங்கள் TypeScript இல் வரையறுக்கப்பட்டுள்ளன மற்றும் மேலும் கட்டுப்பாட்டை வழங்குகின்றன — சிக்கலான, இயக்கமான அல்லது கடுமையான சரிபார்ப்பு படிவங்களுக்கு சிறந்தவை.
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
<input name="email" ngModel required email /> <!-- ngModel registers the field -->
<input name="password" ngModel required minlength="8" />
<button [disabled]="f.invalid">Submit</button>
</form>
படிவ கட்டமைப்பு மற்றும் சரிபார்ப்பு 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
சரியான படிவ அணுகுமுறையைத் தேர்ந்தெடுப்பது பராமரிப்பের জন்য முக்கியம்: டெம்ப்ளேட்-இயக்கப்பட்ட விரைவான, எளிய படிவங்களுக்கு; வினைத்திறன் எதையும் சிக்கலாக — பல-படி வழிகாட்டிகள், இயக்கமான வயல் தொகுப்புகள், குறுக்கு-வயல் சரிபார்ப்பு, அல்லது அலகு சோதனைகள் தேவைப்படும் படிவங்கள்.
வினைத்திறன் படிவங்களின் வெளிப்படையான, கவனிக்கக்கூடிய மாதிரி பொதுவாக தீவிர பயன்பாடுகளில் விரும்பப்படுகிறது, ஏனெனில் இது மேலும் சக்திশালியாக, சோதனையுக்கு தகுதியுடையதாக, மற்றும் அளவிடக்கூடியதாக இருக்கிறது, இருப்பினும் இது அதிகமான முன்கோடு தேவைப்படுகிறது.