angular: unable to dynamically link a set of option-values to an element of a dropdown-menu while looping over an array (*ngFor)

user_16383867 0
Viewed 64

I iterate over an array using *ngFor to create as many cards as there are in the array.
Every card should come with a specific choice in the dropdown-menu (ng-select). And when clicking or selecting this choice a list of available options should be dynamically rendered. Each list of options is uniquely linked to a card, hence the switch-logic in my .ts-template.

modal-view.component.html

<div class="card text-center" *ngFor="let alarm of alarms">
    <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" class="col-xl-12">
      <select 
        class="form-control" 
        id="option" required 
        [(ngModel)]="form.option" 
        name="option" #option="ngModel" 
        (click)="getSensorDesc(alarm)"
        >
          <option value="" selected disabled>Seleziona Giustificativo:</option>
          <option *ngFor="let option of options" [ngValue]="option.value">{{ option.text }}</option>
      </select>
      <button type="submit" class="btn btn-danger btn-xs mt-1 col-xl-12" [disabled]="!f.form.valid">
          Referta
      </button>
    </form>
</div>

At first the select is filled with nothing (instead i want the disabled option with no value, just like a placeholder) but when i choose an option, that option is dispatched to all the other selects. How do i fix this issue??

modal-view.component.ts If there is any other solution for render options dynamically in the select please let me know

export class ModalViewComponent implements OnInit {

 options = [
  { value: 'Falso allarme', text: 'Falso allarme' },
 ];
 
 getSensorDesc(alarm: Alarm) {
   switch (alarm.sensor.type) {
    case 'lidardx':
     this.options.splice(1, 1, { value: 'Tentativo di alzata dx', text: 'Tentativo di alzarsi dal letto dx' });
      break;
    case 'lidarSx':
      this.options.splice(1, 1, { value: 'Tentativo di alzata sx', text: 'Tentativo di alzarsi dal letto sx' });
      break;
    case 'peso':
      this.options.splice(1, 1, { value: 'Fuori dal letto', text: 'Fuori dal letto' });
      break;
    case 'rumore':
      this.options.splice(1, 1, { value: 'Urla inascoltate', text: 'Urla inascoltate' });
      break;
    default:
      break;
} }
angular2-directives angular typescript
1 Answers

O.K. this is not what you asked for. Basically you want to make for each alarm a new form. This is a different approach (that I wrote on a text-editor, so check for ,;(){}"), but I think this might fit your needs. To be honest, it's not easy to understand your explanation.

ts-file

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'alarm',
    templateUrl: './alarm.component.html',
    styleUrls: ['./alarm.component.scss']
})

export class AlarmComponent implements OnInit {
alarmForm: FormGroup;
options = [
  { value: 'Falso allarme', text: 'Falso allarme' },
 ];
alarms: Alarm[];

constructor(
        private formBuilder: FormBuilder
    ) {}

ngOnInit(): void {
            this.initializeForm();
        }

    initializeForm() {
        this.alarmForm = this.formBuilder.group({

            alarm: ['', [Validators.required]]
            alarmoptions: ['', [Validators.required]]

        });

onAlarmChange(value: Alarm) {
// I would put here the switch-logic
switch (value.sensor.type) {
    case 'lidardx':
     this.options.splice(1, 1, { value: 'Tentativo di alzata dx', text: 'Tentativo di alzarsi dal letto dx' });
      break;
    case 'lidarSx':
      this.options.splice(1, 1, { value: 'Tentativo di alzata sx', text: 'Tentativo di alzarsi dal letto sx' });
      break;
    case 'peso':
      this.options.splice(1, 1, { value: 'Fuori dal letto', text: 'Fuori dal letto' });
      break;
    case 'rumore':
      this.options.splice(1, 1, { value: 'Urla inascoltate', text: 'Urla inascoltate' });
      break;
    default:
      break;

}

html-file

<div class="card text-center"> 
    <form [formGroup]="alarmForm" (ngSubmit)="onSubmit()" class="col-xl-12">
<ng-select [items]="alarms" bindValue="?" bindLabel="?" formControlName="alarm" (change)="onAlarmChange($event)"> </ng-select>
<ng-select [items]="options" bindValue="value" bindLabel="text" formControlName="alarmoptions”> </ng-select>
<button class="btn btn-primary" type="submit" [disabled]="!alarmForm.valid">referta</button> 
<!-- (better validation in ts and use a specific boolean to switch on/off the button) -->
    </form>
</div>

Take care & good luck. Let me know your remarks, ideas and maybe I can help in some other way.

user_137652300
Related