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

Search for words in a given string that begin with the symbol $ using Angular 2

I am trying to locate words that begin with $. var str = "$hello, this is a $test $john #doe"; var re = /(?:^|\W)\$(\w+)(?!\w)/g, match, results = []; while (match = re.exec(str)) { results.push(match[1]); } The regular expression a ...

regexangulartypescript

creating interactive tabs in angular using dynamic json values

Currently I am working on a material tab feature where I aim to dynamically generate tabs based on the values from my JSON data. Below is the JSON data: [ { "regionName": "EMEA", "regionCurrency": "USD", "organizationName": "XYZ", "orga ...

angularangular-materialangular8mat-tab

Uploading images to an S3 bucket using Angular4 and saving the response.Location in a global variable for easy access in other functions or methods

Hello, I am currently working on uploading an image to an Amazon S3 server using Angular 4. My goal is to retrieve the response.Location, which is returned from S3 as a URL, and save it to a global variable for easy access. However, I am facing some challe ...

angularamazon-s3angular2-components

Combine an array of arrays with its elements reversed within the same array

I am working with an array of numbers that is structured like this: const arrayOfArrays: number[][] = [[1, 2], [1, 3]]; The desired outcome is to have [[1, 2], [2, 1], [1, 3], [3, 1]]. I found a solution using the following approach: // initialize an e ...

javascripttypescript

Tips for leveraging the power of Vuetify in Angular versions 7 and 9

I am looking to integrate Vuetify UI Components with Angular using VueCustomElement. While I have successfully integrated Angular and VueCustomElement, adding Vuetify has resulted in errors such as missing $attr and $. However, I am determined to add eithe ...

node.jsangularvue.jsvuetify.jsvuesax-4

Guide to displaying a unique custom modal popup when angular page is reloaded

Upon clicking the refresh button on the browser, a personalized popup should appear for confirmation. By utilizing @HostListener('window:beforeunload', ['$event']), it is possible to monitor the event; however, replacing the JavaScript ...

angularangularjs

Sharing information between different components in React can be done using props, context, or a

When attempting to edit by clicking, the parent information is taken instead of creating a new VI. I was able to achieve this with angular dialog but I am unsure how to do it with components. This is done using dialog: <div class="dropdown-menu-item" ...

htmlcssangulartypescript

Tips for effectively combining the map and find functions in Typescript

I am attempting to generate an array of strings with a length greater than zero. let sampleArray2:string[] = ["hello","world","angular","typescript"]; let subArray:string[] = sampleArray2 .map(() => sampleArray2 .find(val => val.length & ...

javascripttypescriptlambdaarrow-functions

What is the method for including a TabIndex property in a JSON file?

I discussed the integration of HTML fields within a JSON file and highlighted how to utilize the TabIndex property effectively in JSON files. ...

c#htmlangulartypes

angular http fails to verify authorization header

My backend is set up in Node.js with Express and Sequelize. When I make a request to retrieve all my product types using Postman, everything works fine as shown in this image: postman http request and header However, when I try to make the same request f ...

angulartypescripthttpsxmlhttprequesthttp-headers

Is there a way to retrieve the number of swipe up interactions from Instagram story insights using the graph API

Is there a way to retrieve the swipe up count displayed in Instagram insights? Since Facebook does not provide this data through their Graph API, how can I access it? I have already tried scraping without success and I am looking for a solution using eith ...

pythondjangoangulartypescriptfacebook-insights

Verify user authentication

My journey with learning Angular 2 has hit a roadblock. I have set up routes in my application as follows: const appRoutes: Routes = [ {path: 'start', component: StartComponent, children:[{path: '' }, { path:&ap ...

angularangular2-routing

Exploring Angular's AG Grid ToolTips

I am encountering an issue while trying to implement AG Grids ToolTip functionality. Following the example provided at https://www.ag-grid.com/documentation/angular/component-tooltip/#example-custom-tooltip-component, I attempted to import { ITooltipAngula ...

angularag-gridag-grid-angular

Issue with displaying options in Angular2 v2.4.9 HTML select element

Ever since I made the transition from AngularJS to Angular2, I've been facing a peculiar issue. The select element's options data is fetched from a Solr query, which always returns a 200 response with the data in a timely manner. However, the pr ...

javascripthtmlangular

How can I showcase images from a server in Node.js to an Angular 2 application?

I am currently facing an issue while trying to display uploaded files from Angular 2 using ngx-uploader and storing them on the backend (nodejs/feathers) with multer. I am unable to access and display the files, specifically images for now, but ultimately ...

node.jsangular

Unlocking the Secrets of Passing ID Parameters Between Pages and Fetching Data from External APIs in Ionic 4

Before I get into it, apologies for the basic question, but I'm struggling to figure this out. Here's my issue: I have a list of categories that are being fetched from a nodeJS api. My goal is to fetch the subcategories based on the id from the d ...

angulardatabaseionic-frameworkroutes

Angular checkbox filtering for tables

I have a table populated with data that I want to filter using checkboxes. Below is the HTML code for this component: <div><mat-checkbox [(ngModel)]="pending">Pending</mat-checkbox></div> <div><mat-checkbox [(ngModel ...

javascriptangulartypescriptangular-material

Encountering a NPM error when trying to launch the server using ng serve

I encountered an error : ERROR in /opt/NodeJS/FutureDMS/src/app/app.module.ts (5,9): Module '"/opt/NodeJS/FutureDMS/src/app/app.routing"' has no exported member 'APP_ROUTE'. Within my code, I have utilized arrow function in the loadCh ...

javascriptnode.jsangulartypescriptangular2-routing

Using Angular to access HTML content through the .ts file

Is there a way to retrieve the value of the input field [newUser] when clicking on the button and executing the action [onAddUser()] in the .ts file? <input type="text" ng-model="newUser" style="text-align:center"/> <button (cl ...

angulartypescript

Enhancing Efficiency: Streamlining Editing in KendoUI Grid for Angular 2/4

According to the information provided on this link, it seems that batch editing of the kendo ui grid for angular 2/4 is currently unavailable. Is there anyone who has come up with a solution or workaround for this issue? ...

angularuser-interfacekendo-uikendo-grid