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
ਸਹੀ ਫਾਰਮ ਪਹੁੰਚ ਚੁਣਨਾ ਸਥਿਤਿਸ਼ੀਲਤਾ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ: ਟੈਮਪਲੇਟ-ਚਲਿਤ ਤੇਜ਼, ਸਧਾਰਨ ਫਾਰਮਾਂ ਲਈ; ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਕਿਸੇ ਵੀ ਗੁੰਝਲਦਾਰ ਚੀਜ਼ ਲਈ — ਬਹੁ-ਪੜਾਅ ਦੀ ਜਾਦੂਗਰ, ਸਮਾਨ ਖੇਤਰ ਦੇ ਸਮੂਹ, ਅੰਤਰ-ਖੇਤਰ ਦੀ ਤਸਦੀਕ, ਜਾਂ ਯੂਨਿਟ ਪ੍ਰੀਖਿਆਵਾਂ ਦੀ ਲੋੜ ਹੋਣ ਵਾਲੇ ਫਾਰਮ।
ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਫਾਰਮਾਂ ਦਾ ਸਪਸ਼ਟ, ਨਿਰੀਖਣਯੋਗ ਮਾਡਲ ਆਮ ਤੌਰ 'ਤੇ ਗੰਭੀਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਤਰਜੀਹ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਕਿਉਂਕਿ ਇਹ ਵਧੇਰੇ ਸ਼ਕਤੀਸ਼ਾਲੀ, ਪ੍ਰੀਖਿਆ ਯੋਗ, ਅਤੇ ਮਾਪਣਯੋਗ ਹੁੰਦਾ ਹੈ, ਭਾਵੇਂ ਇਸ ਲਈ ਆਗੀ ਕੋਡ ਦੀ ਬੋਝ ਦੀ ਲੋੜ ਹੋਵੇ।