ngIf, hidden, disable trong angular form

·

2 min read

  • ngIf :

    • tồn tại/ không tồn tại trong DOM

    • nếu không tồn tại mà query => undefined

    • Khi form get value => vẫn có giá trị dù nó không tồn tại trên DOM, vì nó được tạo ra ở bên file ts

    • Khi form validate thì vẫn validate thằng này, vì validate là validate bên file ts, do đó nếu nó không tồn tại trong DOM mà trạng thái hiện tại của nó đang là invalid => form sẽ invalid => cẩn thận chỗ này.

  • hidden :

    • hiển thị/ không hiển thị trong DOM

    • nếu không hiển thị mà query => vẫn lấy được element này

    • Khi form get value => vẫn có giá trị dù nó không hiển thị trên DOM

    • Khi form validate thì vẫn validate thằng này, vì validate là validate bên file ts, do đó nếu nó không hiển thị trong DOM mà trạng thái hiện tại của nó đang là invalid => form sẽ invalid => cẩn thận chỗ này.

  • Disable :

    • Luôn hiển thị trong DOM nhưng trạng thái là active/inactive (có thể thao tác được hay không)

    • luôn query được element này

    • Khi form get value => bỏ qua giá trị này, nó sẽ không xuất hiện trên form

    • Khi form validate => nó sẽ bỏ qua giá trị này, element ở trạng thái disabled