CODEWITHSUNDEEP
angularangular-material
Kutty
Kutty

Reputation: 722

All Mat-select values change when i change a single mat-select

I have days(in a mat-checkbox) and time ranges (in a mat-select) component. I am able to fetch all the checked values in days. But when i try to change the hours/minutes range in (For eg., Monday), all the days time ranges are changed. Can you please help me in fetching the time ranges for every single day. Like Sunday 9:00 AM to 5:00 PM, Monday 10: 00 AM to 3: 30PM.

The stackblitz url is demo

Upvotes: 4

Views: 247

Answers (2)

ibenjelloun
ibenjelloun

Reputation: 7723

I would suggest using a subcomponent to handle each line, creating interfaces to type your code would make it easier to understand also.

The model for each line would look like this :

export interface Slot {
  id: string;
  isChecked: boolean;
  label: string;
  fromHoursSelected: string;
  fromMinutesSelected: string;
  fromAmpmSelected: string;
  toHoursSelected: string;
  toMinutesSelected: string;
  toAmpmSelected: string;
}

And you could create a component that can edit this model implementing ControlValueAccessor :

export class SlotComponent implements ControlValueAccessor {
  hoursList: string[] = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11'];
  minutesList: string[] = ['00', '30'];
  ampmList: string[] = ['AM', 'PM'];

  onChange = (slot) => {};
  onTouched = () => {};

  model: Slot = {} as Slot;

  writeValue(value: Slot) {
    this.model = value;
  }

  registerOnChange(fn: (rating: number) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

}

Here is a running example.

Upvotes: 2

huan feng
huan feng

Reputation: 8623

This is because you used same variable for all hours and all minutes:

fromHoursSelected and fromMinutesSelected...

Your should have different value for each item:

like:

fromMinutesSelected[0] fromMinutesSelected[1] ...

The better solution should be you write a component for each row.

Please check my answer in this thread: how to collapse with ngx-bootstrap angular without a flag

Upvotes: 1

Related Questions