How to use formControlName and deal with nested formGroup?

Question

As Angular documentation says we can use formControlName in our forms:

Hero Detail
FormControl in a Form         


        

Answer 1

you can use Form group which is basically a collection of controls ( controls mean the fields given in your html form) define in your typescript syntax and binded to your HTML elements using the formControlName directive ,for example

this.myForm = fb.group({
    'fullname': ['', Validators.required],
    'gender': [],
    'address': fb.group({
        'street': [''],
        'houseNumber': [''],
        'postalCode': ['']
    })
});

Template:

   

      Username
                  
   
   

      
      {{ gender }} 
   
   

      

         Username
                     
      
      

         Username
                     
      
      

         Username
                     
      
   

A formGroup can consist of a nested formGroup and hierarchy can continue on ,but in accessing the value the its fairly simple .