Angular - How to create dynamic ng-model store in database

Question

I have two dynamic input field check in/out are depend on selected value. I wish to store data from select option and dynamic input field. my dynamic input field is based on how many select option is selected. For example selected the Monday and Tuesday will show both two check in time and check out time input field.
How to create dynamic ng-model for store the data format like this:

Here is my html code

<form role="form">
          <div class="form-group">
            <label>Profile Name</label>
            <input type="text" class="form-control" placeholder="" 
            name="Table No"
                   [(ngModel)]="attendanceProfile.name" required>
          </div>
    
          <div class="row">
            <div class="col-lg-12">
              <div class="form-group">
                <label>Active Days</label>
                <ng-select [items]="days" name="days"
                           bindLabel="id"
                           autofocus
                           loadingText="Loading ..."
                           [multiple]=true
                           bindValue="id"
                           placeholder="Select Active Days"
                           [(ngModel)]="attendanceProfile.days">
                </ng-select>
              </div>
    
            </div>
            {{attendanceProfile.days?.length}}
          </div>
    
         <div *ngFor="let dayys of attendanceProfile.days; let i =index ">
          <div class="row" *ngIf ="attendanceProfile.days?.length > 0">
             <div class="col-md-4">
              <div class="form-group">
                <label>Day</label>
                <!-- {{attendanceProfile.days[i]}}  --> 
                <input autocomplete="off" atp-time-picker type="text" 
                class="form-control" name="days"
                id="days"  value='{{attendanceProfile.days[i]}}'
                placeholder="days"  [(ngModel)]="multidaytime" 
                 disabled/>  
                
                
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label>Check In Time</label>
                <input autocomplete="off" atp-time-picker type="text" class="form-control" name="checkInTime"
                       id="checkInTime" [(ngModel)]="[multidaytime].checkin"
                       placeholder="Select CheckIn Time"/>  
              </div>
            </div>
    
            <div class="col-md-4">
              <div class="form-group">
                <label>Check Out Time</label>
                <input autocomplete="off" atp-time-picker type="text" class="form-control" name="checkOutTime"
                       id="checkOutTime" [(ngModel)]="[multidaytime].checkout"
                       placeholder="Select CheckOut Time"/>
              </div>
            </div>
          </div>
         </div>
</form>
 

Answer 1

I would follow the below steps to achieve this

// Create type for day
type IDay = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday | "Sunday";

// Create Type for Multi Day Time
type IMultiDayTime = { [key in IDay]?: { checkin: string; checkout: string } };

export class AppComponent {

  // Define the days
  days: IDay[] = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

  // Define a property to hold the active days selected
  activeDays: IDay[] = [];

  attendanceProfile: { name: string; days: IMultiDayTime } = {
    name: "",
    days: {}
  };

  // Create a multidaytime by reducing days to { Monday: {checkout: '', checkin: ''}, ...}
  multidaytime: IMultiDayTime = this.days.reduce((prev, next) => {
    return { ...prev, [next]: { checkin: "", checkout: "" } };
  }, {});

  // Create a function to handle change of the model values
  changeModelValue = (value: IDay[]) => {
    this.attendanceProfile.days = {};
    this.days.forEach(day => {
      if (!value.includes(day)) {
        this.multidaytime[day] = { checkin: "", checkout: "" };
      } else {
        this.attendanceProfile.days[day] = this.multidaytime[day];
      }
    });
  };
}

and in your html

<form role="form">
    <div class="form-group">
        <label>Profile Name</label>
        <input
      type="text"
      class="form-control"
      placeholder=""
      name="Table No"
      [(ngModel)]="attendanceProfile.name"
      required
    />
  </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="form-group">
                    <label>Active Days</label>
                    autofocus
                    <ng-select [items]="days" name="days" loadingText="Loading ..." [multiple]="true"
                        [(ngModel)]='activeDays' (ngModelChange)='changeModelValue($event)'
                        placeholder="Select Active Days">
                    </ng-select>
                </div>
            </div>
        </div>

        <div *ngFor="let day of activeDays; let i =index ">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Day {{ day }}</label>

                        <input
            autocomplete="off"
            atp-time-picker
            type="text"
            class="form-control"
            name="days"
            id="days"
            [value]="day"
            placeholder="days"
            disabled
          />
        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Check In Time</label>
                            <input
            autocomplete="off"
            atp-time-picker
            type="text"
            class="form-control"
            name="checkInTime"
            id="checkInTime"
            [(ngModel)]='multidaytime[day].checkin'
            placeholder="Select CheckIn Time"
          />
        </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Check Out Time</label>
                                <input
            autocomplete="off"
            atp-time-picker
            type="text"
            class="form-control"
            name="checkOutTime"
            id="checkOutTime"
            [(ngModel)]='multidaytime[day].checkout'
            placeholder="Select CheckOut Time"
          />
        </div>
                            </div>
                        </div>
                    </div>
</form>
<pre>{{ attendanceProfile | json }}</pre>

See this sample demo