راهنمای جامع فرم های زاویه ای: مفاهیم و مثال های بنیادی

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-template-driven-form',
  templateUrl: './template-driven-form.component.html'
})
export class TemplateDrivenFormComponent {
  onSubmit(form: NgForm) {
    console.log('Form Data:', form.value);
  }
}

 type="button" (click)="setFormValue()">Set Form Value

import { ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-template-driven-form',
  templateUrl: './template-driven-form.component.html'
})
export class TemplateDrivenFormComponent implements AfterViewInit {
  @ViewChild('myForm') form: NgForm;

  ngAfterViewInit() {
    // Ensure the form is available
  }

  setFormValue() {
    if (this.form) {
      this.form.setValue({
        name: 'John Doe',
        email: 'john.doe@example.com'
      });
    }
  }
}

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html'
})
export class ReactiveFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    console.log('Form Data:', this.myForm.value);
  }
}

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]]
  });
}

setFormValue() {
  this.myForm.setValue({
    name: 'John Doe',
    email: 'john.doe@example.com'
  });
}

patchFormValue() {
  this.myForm.patchValue({
    email: 'john.doe@example.com'
  });
}

ngOnInit() {
  this.myForm.statusChanges.subscribe(status => {
    console.log('Form Status:', status);
  });
}

ngOnInit() {
  this.myForm.valueChanges.subscribe(value => {
    console.log('Form Value:', value);
  });
}

const nameControl = new FormControl('John Doe', Validators.required);

this.myForm = new FormGroup({
  name: new FormControl('John Doe', Validators.required),
  email: new FormControl('john.doe@example.com', [Validators.required, Validators.email])
});

 type="button" (click)="addEmail()">Add Email

get emails() {
  return this.myForm.get('emails') as FormArray;
}

addEmail() {
  this.emails.push(new FormControl('', [Validators.required, Validators.email]));
}

ngOnInit() {
  this.myForm = this.fb.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    emails: this.fb.array([this.fb.control('', [Validators.required, Validators.email])])
  });
}

addEmail() {
  this.emails.push(this.fb.control('', [Validators.required, Validators.email]));
}

setEmails() {
  this.emails.setValue(['email1@example.com', 'email2@example.com']);
}

patchEmails() {
  this.emails.patchValue(['email1@example.com']);
}

 for="selectedOption">Select Option
 id="selectedOption" formControlName="selectedOption">
   *ngFor="let option of options" [value]="option">{{option}}

options = ['Option 1', 'Option 2', 'Option 3'];

ngOnInit() {
  this.myForm = this.fb.group({
    selectedOption: ['', Validators.required]
  });
}

interface FormModel {
  name: string;
  email: string;
}

const form: FormGroup<FormModel> = new FormGroup({
  name: new FormControl<string>(''),
  email: new FormControl<string>('')
});

const record: FormRecord<FormControl<string>> = new FormRecord({
  dynamicKey: new FormControl<string>('Initial Value')
});

record.addControl('newKey', new FormControl<string>('New Value'));