Validation

ng-draw-flow provides a flexible graph validation system at two levels: at the individual node level and at the entire graph level. This allows you to create complex validation rules for your diagrams and visually display errors.

Node-level Validation

Each node in ng-draw-flow can have its own validation logic. For this purpose, the base class DrawFlowBaseNode has an invalid flag, which when set to true automatically adds the CSS class .df-invalid to the node.

How to Use

You can independently manage the validity state of a node within your component. This is especially useful when a node contains a form or other input elements that require validation.

    
      
    

      
        Copy
      
      
    
  

Graph-level Validation

ng-draw-flow also provides the ability to validate the entire graph as a whole. For this purpose, ready-made validators are available that can be applied to the FormControl associated with the ng-draw-flow component.

Built-in Validators

Checks the graph for cycles (cyclicity). A cycle occurs when there is a path that starts and ends at the same node.

    
      
    

      
        Copy
      
      
    
  

Checks the graph for isolated nodes - nodes that have neither incoming nor outgoing connections.

    
      
    

      
        Copy
      
      
    
  

Creating Custom Validators

You can create your own validators for the graph by implementing a function that conforms to the ValidatorFn interface from Angular.