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

ตัวอย่างการใช้ 2 way binding input field ใน Angular คือการใช้สัญลักษณ์ [()] ในการผูกค่าระหว่างตัวแปรใน TypeScript กับ input field ใน HTML ตัวอย่างเช่น

<input type="text" [(ngModel)]="name">

ในตัวอย่างนี้ ตัวแปร name ใน TypeScript จะผูกค่ากับ input field ด้วยสัญลักษณ์ [()] เมื่อผู้ใช้ป้อนข้อมูลลงใน input field ค่าของตัวแปร name ก็จะเปลี่ยนแปลงตามไปด้วย และในทางกลับกัน เมื่อค่าของตัวแปร name เปลี่ยนแปลง ค่าของ input field ก็จะเปลี่ยนแปลงตามไปด้วย

ตัวอย่างการใช้งาน 2 way binding input field ใน Angular เพิ่มเติม มีดังนี้

• การใช้ 2 way binding input field ร่วมกับฟังก์ชัน

<input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()">

ในตัวอย่างนี้ ฟังก์ชัน onNameChange() จะทำงานเมื่อค่าของตัวแปร name เปลี่ยนแปลง

• การใช้ 2 way binding input field ร่วมกับการกรองข้อมูล

<input type="text" [(ngModel)]="name" [(ngModel)]="name | lowercase">

ในตัวอย่างนี้ ค่าของตัวแปร name จะถูกกรองให้เป็นตัวอักษรตัวเล็กเมื่อผู้ใช้ป้อนข้อมูลลงใน input field

• การใช้ 2 way binding input field ร่วมกับการตรวจสอบความถูกต้องของข้อมูล

<input type="text" [(ngModel)]="name" [(ngModel)]="name | required">

ในตัวอย่างนี้ input field จะต้องป้อนข้อมูลจึงจะสามารถใช้งานได้

ตัวอย่างการใช้งาน 2 way binding input field ใน Angular แบบเต็ม มีดังนี้

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

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

  name: string;

  constructor() {}

  ngOnInit() {
  }

  onNameChange() {
    console.log(this.name);
  }

}

<h1>ตัวอย่างการใช้ 2 way binding input field</h1>

<input type="text" [(ngModel)]="name">

<button (click)="onNameChange()">เปลี่ยนชื่อ</button>

เมื่อรันตัวอย่างนี้ ผู้ใช้สามารถป้อนชื่อลงใน input field ได้ เมื่อป้อนชื่อแล้วกดปุ่ม “เปลี่ยนชื่อ” ค่าของตัวแปร name จะเปลี่ยนแปลงตามไปด้วย และค่าของ input field ก็จะเปลี่ยนแปลงตามไปด้วย

นอกจากนี้ ยังสามารถตรวจสอบค่าของตัวแปร name ได้ด้วยการใช้คำสั่ง required ในสัญลักษณ์ [()] ตัวอย่างเช่น

<input type="text" [(ngModel)]="name" [(ngModel)]="name | required">

ในตัวอย่างนี้ input field จะต้องป้อนข้อมูลจึงจะสามารถใช้งานได้ หากไม่ป้อนข้อมูล ผู้ใช้จะเห็นข้อความแสดงข้อผิดพลาดว่า “ชื่อต้องป้อน”

ตัวอย่างการใช้งาน 2 way binding input field ใน Angular แบบเต็มที่มีการตรวจสอบความถูกต้องของข้อมูล มีดังนี้

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

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

  name: string;

  constructor() {}

  ngOnInit() {
  }

  onNameChange() {
    console.log(this.name);
  }

}

<h1>ตัวอย่างการใช้ 2 way binding input field</h1>

<input type="text" [(ngModel)]="name" [(ngModel)]="name | required">

<button (click)="onNameChange()">เปลี่ยนชื่อ</button>

เมื่อรันตัวอย่างนี้ หากผู้ใช้ไม่ป้อนข้อมูลลงใน input field ผู้ใช้จะเห็นข้อความแสดงข้อผิดพลาดว่า “ชื่อต้องป้อน”