I have a requirement in my application to update 3 values using a single ngModelChange event.
The component structure is as follows:
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;
}
The HTML markup is as shown below:
<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>
To update the CPU value along with RAM and Disk Size:
<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>
The JSON result returned from the 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
}
]
I attempted using (change) event but it did not work. One similar logic updates another dropdown list based on ID and functions correctly. However, for multiple parameters, I am facing issues.