typescript - Angular 8: ทำให้ FormBuilder รับเฉพาะตัวเลข พร้อมช่วงของค่าละติจูดและลองจิจูด

ฉันจะทำให้ FormBuilder ต้องกรอกตัวเลขได้อย่างไร?

ฉันกำลังเขียน Formbuilder สำหรับละติจูดและลองจิจูด ในด้านล่างนี้,

• การเขียน -91 หรือ 91 จะทำให้เกิดข้อผิดพลาดในการตรวจสอบ ถูกทำงานตามที่คาดไว้
• อะไรก็ตามระหว่าง -90 ถึง 90 ใช้ได้ ซึ่งดี
• มันรับตัวเลขได้สูงสุด 32 หลักและจุดทศนิยม รวมถึงยังทำงานได้

ปัญหา :

• อย่างไรก็ตาม การพิมพ์ตัวอักษรเช่น 'Abcd' เป็นต้น จะไม่ทำให้เกิดข้อผิดพลาดในการตรวจสอบความถูกต้อง

นี่สามารถแก้ไขได้อย่างไร?

  'latitude': [null, [Validators.maxLength(32), Validators.min(-90), Validators.max(90)]],

หากเป็นไปได้ ควรใช้การตรวจสอบความถูกต้องในฟอร์ม แทนการใช้กล่องข้อความป้อนข้อมูล type=number

คำตอบ #1

คุณสามารถใช้ประเภทอินพุตตัวเลขได้ ซึ่งจะบล็อกตัวอักษรใดๆ

<input type="number" formControlName="latitude" />

อีกตัวเลือกหนึ่งคือการใช้ Validators.pattern เพื่ออนุญาตเฉพาะตัวเลข ซึ่งจะตั้งค่าควบคุมให้เป็นไม่ถูกต้องหากคุณป้อนตัวอักษรที่ไม่ถูกต้อง

   latitude: [
        null,
        [
          Validators.maxLength(32),
          Validators.min(-90),
          Validators.max(90),
          Validators.pattern(/\-?\d*\.?\d{1,2}/)
        ]
      ]

สาธิต 🚀🚀

คำตอบ #2

คุณก็สามารถทำได้ด้วยไลบรารี ng2-validation

import { CustomValidators } from 'ng2-validation';

ช่วง

new FormControl('', CustomValidators.range([10, 20]))

ตัวเลข

 new FormControl('', CustomValidators.digits)

ใช้มันเป็น

latitude: [null,
           [CustomValidators.digits,CustomValidators.range([-90, 90])]         
          ]