tiktok นับยอดวิวยังไง

ตัวอย่างการสร้างฟอร์มแบบไดนามิกใน Angular มีดังนี้

การสร้างฟอร์มแบบไดนามิกด้วย reactive forms

ในการสร้างฟอร์มแบบไดนามิกด้วย reactive forms เราสามารถใช้ FormBuilder เพื่อสร้าง FormGroup แบบไดนามิกได้

ตัวอย่างการสร้างฟอร์มแบบไดนามิกด้วย reactive forms

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

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css'],
})
export class DynamicFormComponent {

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    // Create a dynamic form group
    this.formGroup = this.formBuilder.group({
      name: [''],
      email: [''],
      age: [''],
    });
  }

  addField(type: string) {
    // Add a new field to the form group
    this.formGroup.addControl(type, ['']);
  }

}

ในตัวอย่างนี้ เราสร้าง FormGroup แบบไดนามิกที่มีสามฟิลด์: name, email และ age

เราสามารถเพิ่มฟิลด์ใหม่ให้กับฟอร์มแบบไดนามิกได้โดยใช้ addField()

การสร้างฟอร์มแบบไดนามิกด้วย template-driven forms

ในการสร้างฟอร์มแบบไดนามิกด้วย template-driven forms เราสามารถใช้ ngFor เพื่อวนซ้ำผ่านรายการของฟิลด์และสร้างองค์ประกอบ input สำหรับแต่ละฟิลด์

ตัวอย่างการสร้างฟอร์มแบบไดนามิกด้วย template-driven forms

<form [formGroup]="formGroup">
  <input type="text" formControlName="name" />
  <input type="email" formControlName="email" />
  <input type="number" formControlName="age" />

  <button type="submit">Submit</button>
</form>

ในตัวอย่างนี้ เราวนซ้ำผ่านรายการของฟิลด์ fields และสร้างองค์ประกอบ input สำหรับแต่ละฟิลด์

เรายังสามารถใช้ ngIf เพื่อแสดงหรือซ่อนองค์ประกอบของฟอร์มแบบไดนามิกได้

ตัวอย่างการใช้ ngIf เพื่อแสดงหรือซ่อนองค์ประกอบของฟอร์มแบบไดนามิก

<form [formGroup]="formGroup">
  <input type="text" formControlName="name" />
  <input type="email" formControlName="email" />

  <div *ngIf="formGroup.get('age') !== undefined">
    <input type="number" formControlName="age" />
  </div>

  <button type="submit">Submit</button>
</form>

ในตัวอย่างนี้ เราจะแสดงองค์ประกอบ input สำหรับฟิลด์ age เฉพาะเมื่อฟิลด์ age มีข้อมูล

สรุป

การสร้างฟอร์มแบบไดนามิกใน Angular สามารถทำได้โดยใช้ reactive forms หรือ template-driven forms เราสามารถเลือกใช้วิธีการสร้างฟอร์มแบบไดนามิกที่เหมาะสมกับความต้องการของแอปพลิเคชันของเรา