FormControl, FormGroup, FormArray

 Form Control:

Smallest unit, represents input, radio, select, whatever form HTML element it is bind with.

1.  FormControl {
1. asyncValidator: null
2. errors: null
3. pristine: true
4. status: "VALID"
5. statusChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
6. touched: true
7. validator: null
8. value: ""
9. valueChanges: EventEmitter {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
10. _onChange: [ƒ]
11. _onCollectionChange: () => { }
12. _onDisabledChange: [ƒ]
13. _parent: FormGroup {validator: null, asyncValidator: null, pristine: true, touched: true, _onCollectionChange: ƒ, …}
14. _pendingTouched: true
15. _pendingValue: ""
16. dirty: (...)
17. disabled: (...)
18. enabled: (...)
19. invalid: (...)
20. parent: (...)
21. pending: (...)
22. root: (...)
23. untouched: (...)
24. updateOn: (...)
25. valid: (...)
26. __proto__: AbstractControl
27. }

    
    

28. 
    
29. 
    
30.  Form Group:
31. 
    
32. Object, and in controls it contains object of formcontrols or formArray.
33. {
34. 1. asyncValidator: null
    2. controls: {userLst: FormArray, test: FormControl}
    3. errors: null
    4. pristine: true
    5. status: "VALID"
    6. statusChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
    7. touched: false
    8. validator: null
    9. value: {userLst: Array(15)}
    10. valueChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
    11. _onCollectionChange: () => this._updateDomValue()
    12. _onDisabledChange: []
    13. dirty: (...)
    14. disabled: (...)
    15. enabled: (...)
    16. invalid: (...)
    17. parent: (...)
    18. pending: (...)
    19. root: (...)
    20. untouched: (...)
    21. updateOn: (...)
    22. valid: (...)
    23. __proto__: AbstractControl
    24. }
    25. 
        
    26.  Form Array, similar to form control, but in controls, it contains an array of form control instead of object:
    27. 1. {
        1. asyncValidator: null
        2. controls: (15) [FormControl, FormControl, FormControl, FormControl, FormControl, FormControl, FormControl, FormControl, FormControl, FormControl, FormControl, FormControl, FormControl, FormControl, FormControl]
        3. errors: null
        4. pristine: true
        5. status: "VALID"
        6. statusChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
        7. touched: false
        8. validator: null
        9. value: (15) [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false]
        10. valueChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
        11. _onCollectionChange: () => { }
        12. _onDisabledChange: []
        13. _parent: FormGroup {validator: null, asyncValidator: null, pristine: true, touched: false, _onCollectionChange: ƒ, …}
        14. dirty: (...)
        15. disabled: (...)
        16. enabled: (...)
        17. invalid: (...)
        18. length: (...)
        19. parent: (...)
        20. pending: (...)
        21. root: (...)
        22. untouched: (...)
        23. updateOn: (...)
        24. valid: (...)
        25. __proto__: AbstractContro; }
        26. 
            
        27. 1. Details guide: 
            2. 
               
            3. https://stackoverflow.com/questions/41288928/when-to-use-formgroup-vs-formarray#:~:text=4%20Answers&text=FormArray%20is%20a%20variant%20of,the%20group%2C%20like%20dynamic%20forms.
            4. 
               
            5. https://medium.com/aviabird/complete-angular2-guide-reactive-forms-in-depth-part-1-21a8e2428904
            6. 
               
            7. https://ashish173.github.io/ng2-forms/trip/create
            8. 
               
            9. https://github.com/ashish173/ng2-forms/blob/master/src/app/components/trip-edit/trip-edit.component.ts
            10. 
                
            11. https://github.com/ashish173/ng2-forms/blob/master/src/app/components/trip-edit/trip-edit.component.html
            12. 
                
            13. 
                
            14. 
                
        28. 
            
        29. 
            
        30. 
            
        31. 
            
        32. 
            
        33. 
            
    28. 
        
35. 
    
36.