How to update multiple parameters with ngModelChange?

Question

In my application I would like to change 3 values with one ngModelChange.

My component looks like:

  model: any = {};
  images: any;
  public input = true;
  public dropdown = false;
  images : any;

  constructor(...services) {

  }

  ngOnInit() {
    let projectId = +this.route.snapshot.paramMap.get('projectId')
    this.model.projectId = projectId
    this.model.ram = 1073741824
    this.model.cpu = 1
    this.model.diskSize = 1073741824
    this.images = this.getImages()
    this.onChange(this.images)
  }

  onChange(test: any) {
    this.model.ram = test.ram
    this.model.cpu = test.cpu
    this.model.diskSize = test.diskSize
  }

  getImages(){
    this.imgService.getImages().subscribe(x => this.images = x)
  }


  hideInput(){
    this.dropdown = true;
    this.input = false;
    this.onChange(this.images)
  }

  hideDropdown(){
    this.input = true;
    this.dropdown = false;
  }

My html looks like:

<div class="row">
      <div class="col-3 mt-3">
        <div class="form-check form-check-inline">
          <input class="form-check-input" (click)="hideDropdown()" type="radio" 
         name="inlineRadioOptions" id="inlineRadio1" value="option1" checked>
          <label class="form-check-label" for="inlineRadio1">Image Url</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" (click)="hideInput()" type="radio" 
        name="inlineRadioOptions" id="inlineRadio2" value="option2">
          <label class="form-check-label" for="inlineRadio2">Pre Registered Images</label>
        </div>       
      </div>
      <div class="col-9" *ngIf="input">
        <mat-form-field class="example-full-width">
          <input matInput name="imageUrl" required [(ngModel)]="model.imageUrl" trim 
          pattern="(^(\/{1})([a-zA-Z]+))*^(ht)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0- 
          9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$"
          >
        </mat-form-field>
      </div>
      <div class="col-9" *ngIf="dropdown">
        <mat-form-field class="example-full-width">
          <mat-label>Please choose image</mat-label>
          <select matNativeControl name="imageUrl" required [(ngModel)]="model.imageUrl" 
          (ngModelChange)="onChange($event)">           
            <option *ngFor="let item of images" [ngValue]="item.imageUrl">
              {{ item.name }}
            </option>
          </select>
        </mat-form-field>
      </div>
    </div>

Want to update cpu ( as well as ram and diskSize):

<div class="row">
      <div class="col-3 mt-3 labelText">
        <span class="spanText">CPU</span>
      </div>
      <div class="col-7">
        <mat-slider min="1" max="32" step="1" name="cpu" class="example-full-width" 
        [(ngModel)]="model.cpu">
        </mat-slider>
      </div>
      <div class="col-2">
        <div class="circle mt-1">{{model.cpu}}</div>
      </div>
    </div>

Json result of images from backend api:

[
   {
      "id":1,
      "name":"cedric-ubuntu",
      "imageUrl":"someurl",
      "diskSize":10737418240,
      "ram":1073741824,
      "cpu":1
   },
   {
      "id":2,
      "name":"arzu-ubuntu",
      "imageUrl":"someurl",
      "diskSize":10737418240,
      "ram":2147483648,
      "cpu":2
   }
]

Tried also (change) but is not working. P.S. I have one similiar logic which updates another dropdown list according to id and it works fine. But for multiple parameters it is not working.

Answer 1

You can use FormArray for multiple parameters. code looks like

const arr = new FormArray([
  new FormControl(),
  new FormControl()
 ]);

you can follow these links angular formArray dynamicForm

Answer 2

You're using the same "onChange" function for ngModelChange and the function "hideInput", On hideInput you're passing the object "images" to the function, but in the select tag you're just passing the $event, not a "image" object, that's why its not working.

EDIT

You have this

images: any; <--- double declared 

onChange(test: any) { <--- You're resiving one object here
    this.model.ram = test.ram
    this.model.cpu = test.cpu
    this.model.diskSize = test.diskSize
} 

hideInput(){
    this.dropdown = true;
    this.input = false;
    this.onChange(this.images) <--- HERE, you're passing object/array images
} 

(ngModelChange)="onChange($event)"> <----- Here yu're passing the select $event, not the object selected