Instructions on how to post an array by its ID when the value changes in the form, correspond with the ID

Whenever I change the value in the radio button within a form popup, I want to trigger this action. Below is the corresponding HTML code:

<ng-container cdkColumnDef="injected">
                            <mat-header-cell *cdkHeaderCellDef class="radioButtonVacXin"&g t;>
                                <p style="width:50px;"&g t;
                                {{'VacXin.Injected' | translate}}  
                                </p>
                                <p>
                                {{'VacXin.notInjected' | translate}} 
                                </p>
                                <p>
                                {{'VacXin.refuseInjected' | translate}}
                                </p>
                            </mat-header-cell>
                            & lt;mat-cell *cdkCellDef= "let item" class= "radioButtonVacXin"&g t;>
                                <mat-radio-group class= "w-180" class= "radioButtonVacXin" fxLayout="row" [(ngModel)]= "item.injected" [ ngModelOptions]= "{standalone: true}"&g t;>
                                    <mat-radio-button class= "w-60"   [value]= "1" fxLayoutAlign= "center center"&g t;
                                    </mat-radio-button>
                                    <mat-radio-button class= "w-60" [value]= "0" fxLayoutAlign= "center center"&g t;
                                    </mat-radio-button>
                                    <mat-radio-button class= "w-60"  [value]= "2" fxLayoutAlign= "center center"&g t;
                                    </mat-radio-button>
                                </mat-radio-group& g t;
                            </mat-cell> 
                        </ng -container>

Additionally, here is how my TypeScript file appears:

export class AddStaffVacXinComponent implements OnInit {
    item: any = {};
    form: FormGroup;
    formErrors: any;
    isEdit: boolean;
    comboData: any[] = [];
    allManufactory: any[] = [];
    FilterManufactory: any[] = [];
    displayedVacXin = ['injected'];
    params: any = {};
    dataSourceVacXin: MatTableDataSource< any> = new MatTableDataSource< any>([]);
    employeeId : any ={};

    constructor(
        public snackBar: MatSnackBar,
        private translate: TranslatePipe,
        public staffVacXin: StaffVacxinService,
        public dialogRef: MatDialogRef< AddStaffVacXinComponent>,
        @Inject( MAT_DIALOG_DATA) public data: any,
        public dialog: MatDialog,
        private formBuilder: FormBuilder,
      ) {
        if (this.data.item) {
            this.item = Object.assign({ }, data.item);
            this.employeeId = this.item.id;

            this.isEdit = true;
        }
        else {
            this.isEdit = false;
        }
       }
    
    ngOnInit() {
        let params = this.params;
        this.params = this.employeeId;
        this.staffVacXin.getDetail(this.params).then(res => {
            debugger
            this.dataSourceVacXin.data = res;
        });
    }

    processResponse(res) {
        if (res) {
            this.snackBar.open(
                this.translate.transform("Common.Msg.UpdateSuccess"),
                "OK",
                {
                    verticalPosition: "top",
                    duration: 2000,
                }
            );
            this.dialogRef.close(res);
        } else {
            this.snackBar.open(
                this.translate.transform("Common.Msg.UpdateError"),
                "OK",
                {
                    verticalPosition: "top",
                    duration: 2000,
                }
            );
        }
    }

    save() {
        debugger
        if (!this.data.isEdit) {
            this.staffVacXin.post(this.item).then(rs => {
                if (rs) {
                    this.processResponse(true);
                } else {
                    this.processResponse(false);
                }
            })
        } else {
            this.staffVacXin.put(this.item, this.item.id).then(rs => {
                if (rs) {
                    this.processResponse(true);
                } else {
                    this.processResponse(false);

                }
            })
        }
    }

Furthermore, the API response is structured as follows; where inject=0 corresponds to "notInjected", inject=1 represents "Injected", and inject=3 signifies "refuseInjected". The data is fetched based on the employeeId, and I intend to trigger certain actions when the form values are changed.

[
  {
    "name": "HEBERBIOVAC",
    "inject": 1,
    "note": "namhg",
    "employeeId": "7f11a477-e672-439c-a40c-acfa14d8122f",
    "vaccinId": "a41f12e5-7e67-45b8-a344-08dacdf4156b"
  },
  {
    "name": "PRIORIX",
    "inject": 0,
    "note": "namhg",
    "vaccinId": "5d0546dc-cdc0-4629-a345-08dacdf4156b",
    "employeeId": "7f11a477-e672-439c-a40c-acfa14d8122f"
  },
  {
    "name": "nnn",
    "inject": 0,
    "note": "test",
    "vaccinId": "8ab9a6b9-b956-462e-a346-08dacdf4156b",
    "employeeId": "7f11a477-e672-439c-a40c-acfa14d8122f"
  }
]
angulartypescriptangular-material

Answer №1

After some investigation, it dawned on me that I had overlooked retrieving the employeeId from each record in the API. As a result, I made the necessary adjustments to rectify this issue:

 ngOnInit() {
        debugger;
        let params = this.params;
        this.params = this.employeeId;
        
        this.staffVacXin.getDetail(this.params).then((res) => {
            for (let i = 0; i < res.length; i++) {
                const element = res[i];
                element.employeeId = this.params;
            }
            this.dataSourceVacXin.data = res;
        });
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Challenges with image cropping in Angular causing performance problems

Utilizing this specific component for image cropping within an ionic/angular8 project has been causing severe performance issues, leading to unresponsiveness on mobile devices. Interestingly, the desktop version does not encounter any problems and the crop ...

angulartypescriptcropionic5

How to start Angular2 prototype with an object literal

export abstract class GridColumn { public field?: string; public sortField?: string; public header?: string; public footer?: string; public sortable?: any = true; public editable?: boolean = false; public filter?: boolean = true ...

angulartypescript

Issues with the functionality of Angular 2 routerLink

Unable to navigate from the homepage to the login page by clicking on <a routerLink="/login">Login</a>. Despite reviewing tutorials and developer guides on Angular 2 website. Current code snippet: index.html: <html> <head> ...

htmlangulartypescriptroutes

Incorporating node packages into your typescript projects

I have been exploring various discussions on this forum but I am still unable to make it work. My goal is to compile the following code in TypeScript. The code is sourced from a single JavaScript file, however, due to issues with module inclusion, I am foc ...

node.jstypescript

When utilizing ng-content alongside *ngtemplateOutlet, the content does not appear visible within the DOM

I'm working with three Angular components - a base component and two child components (child1 and child2). The structures are as follows: child1.component.html <ng-template #child1Template> <div> <h1>CHILD 1</h1> ...

htmlangularparent-childng-contentngtemplateoutlet

What is the most efficient way to modify a list within another list variable in Angular without impacting the parent list?

Here is a data list that I am working with: subscriberDataList -> wipEligibilityList -> dependentList dependentList -> wipEligibilityList -> eligibilityList wipEligibilityList[0] -> status - ...

angularangular6angular8

Implementing multer diskStorage with Typescript

I'm currently in the process of converting a node.js server to TypeScript. Here is what my function looks like in Node: const storage = multer.diskStorage({ destination: function (req, file, cb) { const dir = './uploads/'; ...

node.jstypescriptserverstoragemulter

What could be causing the div to be wider than the content inside of it?

I am having an issue creating a webpage with a 20-60-20 flex fill layout. The div in the center, which should occupy 60% of the page, is wider than its content, causing it to appear off-center. https://i.stack.imgur.com/WwCJy.png Here is my home.componen ...

htmlcssangularangular-flex-layout

Navigating through embedded arrays in Angular

JSON Object const users = [{ "name":"Mark", "age":30, "isActive" : true, "cars":{ Owned : ["Ford", "BMW", "Fiat"], Rented : ["Ford", "BMW", "Fiat" ...

javascriptangulartypescript

The error message "ng2-test-seed cannot be found - file or directory does not exist"

I've been attempting to work with an angular2 seed project, but I'm encountering some challenges. https://github.com/juliemr/ng2-test-seed When I run the command: npm run build I encounter the following error: cp: cannot stat ‘src/{index.h ...

node.jsangularnpm

Inferencing partial types in Typescript

I'm completely stuck on this and can't seem to figure it out without using a second function: interface Fixed { a: number } const fn = <A, B extends {} = {}>(b: B) => { return b } fn({ a: 1 }) // { a: number } fn<Fixed>({ a: 1 } ...

typescripttype-inference

Launching the Angular2 application

I created an Angular 2 application and now I am looking to deploy it. Currently, my root folder contains: HTML files JS files (compiled from TypeScript) CSS files (compiled from SCSS) /node_modules/ directory /bower_components/ directory The last two d ...

node.jsangularnpmbower

Is there a way to identify which elements are currently within the visible viewport?

I have come across solutions on how to determine if a specific element is within the viewport, but I am interested in knowing which elements are currently visible in the viewport among all elements. One approach would be to iterate through all DOM elements ...

javascripthtmlangulartypescript

Employing a provider within a different provider and reciprocally intertwining their functions

I'm currently facing an issue with two providers, which I have injected through the constructor. Here's the code for my user-data.ts file: @Injectable() export class UserDataProvider { constructor(private apiService: ApiServiceProvider) { ...

angulartypescriptionic-framework

Continuously refreshing the information displayed in the Angular view that is linked to a function in the TypeScript file whenever a modification is identified

I am currently working on an ecommerce application using the MEAN stack. In order to make the app real-time, I have integrated pusher-js. To show the quantity of a specific item in the shopping cart, I have implemented a function in the ts file that loops ...

node.jsangularexpresspusher

Turning XSD into TypeScript code

Stumbling upon this tool called CXSD, I was intrigued. The documentation describes cxsd as a streaming XSD parser and XML parser generator designed for Node.js and TypeScript (optional but highly recommended). It seemed like the perfect solution for my ne ...

xmltypescriptxsdschema

Creating Angular components and attaching them to the body tag is a simple yet

My goal is to create a component at the root element of the page. I have come across some resources that are similar to what I need, but they use the DynamicComponentLoader which is now considered deprecated. public component: any; constructor( public ...

angular

What is the reason for `downlevelIteration` not being enabled by default?

When directing towards ES5 and using the spread operator ... to convert an Iterator to an Array, it prompts the need for the -downlevelIteration compiler option. Enabling this option allows the spread operators to function without any errors. I'm cur ...

typescript

Utilizing Angular Material to emphasize a row in a table upon clicking

Guide on Applying a "Highlight" Effect to a Row When Clicked - Angular 8 Below is the structure of my table: <ng-container *ngIf="videos$ | async as videos"> <mat-table [dataSource]="videos" *ngIf="videos.length"> <ng-container matColu ...

angularsyntax-highlighting

Eliminate the X-Powered-By:express response header from the Angular UI navigation URL

When using the application, I am not seeing the header x-powered-by in the response headers, which is functioning as intended. The issue occurs when a user refreshes the page, causing the x-powered-by header to be added to the response header in the devel ...

angularexpress