Handling multiple tabs in reactive forms with mat-tab group in Angular

Question

I want to know the efficient appraoch in terms of handling a form with multiple tabs in angular.

For example I have a form with mat-group and three tabs such as business hours / out of office and holiday.
I have three fields which are present in all those three tabs such as title, calendar and colour.
Apart from that calendar / colour are present in a separate div.

Here is some part of the html file of the form with some formControlName.

Note : The following html form with three mat-tabs are working fine and I have added just for the referene.


  
    
      close
      {{formHeading}}
    
    
      


        

          

          

            

              
                
                  
                
              


              
                access_time

                
                  Start Date
                  
                    
                    
                  
                


                


                
                  
                      Shifts
                      
                        
                      

                      
                        
                          
                            
                              {{timeFrom.viewValue}}
                            
                          
                        
                      

                      
                        
                          
                            
                              {{timeTo.viewValue}}
                            
                          
                        
                      

                      
                    
                
                
              

              

              
                replay
                Repeat
                
                  
                    
                      {{ option | titlecase }}
                    
                  
                
            
                
                  {{ repeatType === 'week' ? 'Weekly on' : repeatType }}
                  
                     {{ day }} 
                  
                
              


              
                check_circle_outline
                Expiry Date
                
                  
                    Never
                    Custom
                  
                

                 {{endDate | date}}
                  
              
            

          
 
            

              
                
                  
                
              

              
                access_time
                Date & time
                
                  
                  
                  
                

                
                  
                    
                      {{timeFrom.viewValue}}
                    
                  
                

                
                  
                    
                      {{timeTo.viewValue}}
                    
                  
                
                
                  
                  
                  
                
                
                All Day

              
              
                
                  Message
                  
                    
                  
                

                
              

              
                replay
                Repeat
                
                  
                  
                    
                      {{option | titlecase}}
                  
                

                 {{repeatType == 'week' ? 'Weekly on' : repeatType}}
                   {{day}} 
                  
                
              

              
                
                check_circle_outline
                Expiry Date

                
                  
                    
                    
                  
                  
                  
                
              
            

          

          

            

              
                
                  
                
              

              
                
                  Message
                  
                    
                  
                
              


              
                replay
                Repeat
                
                  
                  
                    
                      {{option | titlecase}}
                  
                

                 {{repeatType == 'week' ? 'Weekly on' : repeatType}}
                   {{day}} 
                  
                
              

              
                access_time
                Expiry Date
                
                
                  
                    
                    
                  
                  
                  
                
              
            
            

          
        

        
          
          today
          
          Select Calender
          

            
              
                {{calendar?.name}}

That is the complete form that I have attached and only for the reference I have attached it.

And here is the from initiliazation ,

this.eventForm = this.fb.group({
      title: ["Title", [Validators.required]],
      datePicker: [""],
      shifts: this.fb.array([]),
      endDate: [""],
      calendars: ["", [Validators.required]],
      color: [""],
      endDateCriteria: ["never"],
      recurrenceCriteria: ["does not repeat"],
      timeMessage: [""],
      allDayEvent: false,
      // dateRange: this.fb.group({
      dateRangeStart: [""],
      dateRangeEnd: [""],
      recurrenceRule: [""]
    });

The event From contains all these formControls in it.

Problem Is stated below.
Now real issue arrises whenI click on the create button and that event contains all the values of the event Form. How can I handle tabs efficiently.

First solution that comes to my mind is that , I extract the values from the from on the basis of the tabIndex and adjust the payload and send it to the backend for saving it.

onEventSave() {
    if(this.activeTabIndex === 0) {
      const formData = this.eventForm.value;
      console.log("this is the first tab index")
      console.log("Here is on submit now",this.eventForm.value); 
    } else if(this.activeTabIndex === 1) {
      console.log("this is the second tab index")
    } else if(this.activeTabIndex === 2) {
      console.log("this is the third tab index")
    }
  }

This is how I can handle all the events and save it in the databasis and add the field in it of eventType in the payload. Is this an efficient apprach. ?

If I use it then how I will handle the update case as when i click on the event on a calendar then how I will go to the respective tab form and patch values. ?

If I need to use any other way to handle such calendar app then how would I get the values of colour and calendar that are being used in a separate div? It will be duplicate code if i put it in every mat-tab and use it. Right ?
Or I need to handle tabs in a different and efficient way. Let me know please and you can review the html file code where I can do it better.

Suggenstion / Articles related to it / Demos. All are welcome.

I want to handle three tabs in angular reactive forms differently and extract the values from the tab and process it further efficiently.
How can I create different events such as Out of office / business hours / holiday events with a sinlge button of create in a form and extract the values form the respective tab and process it further. And how can I handle the update case.
Thanks.

Handling multiple tabs in reactive forms with mat-tab group in Angular

Answers (1)

Related Questions