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

ในการ retrieve date จาก Reactive Form ใน Angular เราสามารถใช้บริการ FormControl ของ Angular ได้

FormControl เป็นคลาสที่ช่วยให้เราสามารถจัดการข้อมูลในฟอร์มได้ โดยเราสามารถใช้ value property ของ FormControl เพื่อ retrieve ค่าของฟอร์มได้

ตัวอย่างการ retrieve date จาก Reactive Form

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  formBuilder: FormBuilder;
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      date: new FormControl('2023-08-22', [Validators.required, Validators.date])
    });
  }

  onSubmit() {
    // Retrieve date from the form
    const date = this.form.get('date').value;

    // Do something with the date
    console.log(date); // 2023-08-22
  }

}

โค้ด HTML

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="date" formControlName="date">
  <button type="submit">Submit</button>
</form>

Output

เมื่อเราป้อนวันที่ลงในฟอร์มและคลิกปุ่ม “Submit” โค้ดจะพิมพ์วันที่ลงในคอนโซล

2023-08-22

วิธีอื่นในการ retrieve date จาก Reactive Form

นอกจากการใช้ value property แล้ว เรายังสามารถใช้ valueChanges observable ของ FormControl เพื่อ retrieve ค่าของฟอร์มได้

valueChanges observable จะส่งออกชุดของ values ใหม่ทุกครั้งที่ค่าของฟอร์มเปลี่ยนแปลง

ตัวอย่างการ retrieve date จาก Reactive Form โดยใช้ valueChanges observable

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  formBuilder: FormBuilder;
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      date: new FormControl('2023-08-22', [Validators.required, Validators.date])
    });

    // Subscribe to the valueChanges observable
    this.form.get('date').valueChanges.subscribe(date => {
      // Do something with the date
      console.log(date); // 2023-08-22
    });
  }

}

โค้ด HTML

<form [formGroup]="form">
  <input type="date" formControlName="date">
</form>

Output

เมื่อเราป้อนวันที่ลงในฟอร์ม โค้ดจะพิมพ์วันที่ลงในคอนโซลทุกครั้งที่วันที่เปลี่ยนแปลง

2023-08-22