Tag: Bootstrap

สวัสดีครับ บทความนี้ผมจะมาโน๊ตวิธีการติดตั้ง mdbootstrap ใน angular กันนะครับ ซึ่งเจ้าตัว mdbootstrap มันเป็น Material Design สำหรับ Bootstrap มีให้เลือกหลากหลายว่าเราจะใช้กับ framework ไหน ในที้นี้ผมจะนำมาใช้กับ angular ครับ เราไปติดตั้งกันก่อน ในที่นี้ผมจะทำการติดตั้งแบบ npm และทำการ config เองทั้งหมดนะครับ ก่อนอื่นเราก็ต้องสร้างโปรเจ็ค angular ขึ้นมาก่อน ตามคำสั่ง สำหรับใครที่มีอยู่แล้วก็ใช้ได้เลย แต่ต้องแน่ใจว่า style ของโปรเจ็คเป็นแบบ scss ถ้ายังไม่ใช่ก็เปลี่ยนได้ตามคำสั่งต่อ ๆ ไปครับ จากนั้นเมื่อได้แล้ว ให้เราเข้าไปที่โปรเจ็ค แล้วรันคำสั่งเพื่อเพิ่ม mdbootstrap เข้าไปใน project จากนั้นเราก็ไปเพิ่มโค้ดไป app.module.ts ดังนี้ จากนั้นให้เราไปเช็คในไฟล์ angular.json ว่าเป็น scss แล้วหรือไม่ ตามโค้ดด้านล่าง ถ้ายังไม่ใช่ให้เปลี่ยนไปเป็น scss เสีย

สวัสดีครับ บทความนี้ผมจะมาใช้ Bootstrap Validator ในการ validate form กันครับ Form ที่ผมจะ Validate นี้จะเป็น Form สำหรับ Register ครับ ก่อนอื่นเราก็ไปดาวน์โหลดและติดตั้ง Bootstrap Validator กันก่อนครับ ซึ่งวิธีที่ผมจะใช้ติดตั้งผมจะใช้ bower ในการติดตั้งนะครับ โดยผมจะพิมพ์คำสั่ง ส่วนใครที่ยังไม่ได้ติดตั้ง bower ก็ให้ไปติดตั้งได้นะครับ โดยใช้คำสั่ง ส่วนใครอยากติดตั้งโดยใช้วิธีอื่นเช่น การดาวน์โหลด หรือติดั้งโดย npm หรือจะใช้แบบ cdn ก็ใช้ได้เลยครับ สามารถดูรายละเอียดอื่น ๆ ได้ที่ https://github.com/1000hz/bootstrap-validator จากนั้นใน Form ให้เราใส่ data-toggle=”validator” ไปด้วย ดังตัวอย่างโค้ด ในส่วนของ lib ก็แอดเพิ่มไปด้วยนะครับ แค่นี้เราก็พร้อมแล้ว ต่อไป เราไปดูตัวอย่างโค้ดที่ผม validate กันครับ ซึ่งฟอร์ม Register