Using Angular Form Builder to assign a value depending on the selected option in a dropdown menu

My approach to Angular Form Builder initialization includes a group that looks like this:

    contactReason: this.formBuilder.group({
        description: '',
        source: this.sourceType()
    })

For the 'description' field, I have a select option with predefined values such as "request for information". Here's a sample mapping I use in other parts of my application:

public ContactReason = {
    "request for information": 'incoming',
    "other incoming": 'incoming',
    "call update": 'outgoing',
    "information provided": 'outgoing',
    "attempted contact": 'outgoing',
    "regular contact": 'outgoing',
    "other outgoing": 'outgoing',
};

Each description is associated with either "incoming" or "outgoing". A method is needed to map the selected description to the corresponding value here...

source: this.sourceType()

private sourceType() {
//logic for source mapping based on description.value
}

If you have any insights on how to implement the above method, your help would be greatly appreciated. Thank you!

Answer №1

Through the clever use of an array of mapped values, I was able to effectively map my data based on how I phrased the question. It may seem simple, but I will keep this solution here for future reference.

public logEntryContactReason = {
        "request for information": 'incoming',
        "other incoming": 'incoming',
        "case update": 'outgoing',
        "information provided": 'outgoing',
        "attempted contact": 'outgoing',
        "regular contact": 'outgoing',
        "other outgoing": 'outgoing',
    };

private sourceType() {
    const data = this.contactForm.value;
   return this.logEntryContactReason[data.contactReason.description]
}

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

Angular 2 Release Candidate 6 - The element "sidebar" is unrecognized

After upgrading to RC6, I encountered an issue with the following error message: zone.min.js:1 Unhandled Promise rejection: Template parse errors: 'sidebar' is not a known element: 1. If 'sidebar' is an Angular component, then ve ...

Begin the NextJS project by redirecting the user to the Auth0 page without delay

I am new to coding and currently working on a project using Typescript/NextJS with Auth0 integration. The current setup navigates users to a page with a login button that redirects them to the Auth0 authentication page. However, this extra step is unneces ...

How can you retrieve the user that is currently signed in using AngularFire and Firebase Authentication in Angular?

If you're working with Angular and trying to access the currently signed-in user through Firebase Auth, you may encounter some difficulties. Here's a snippet of code provided in the Firebase Auth documentation that demonstrates how to get the sig ...

Should Errors be Handled in the Service Layer or the Controller in the MVC Model?

Currently, I am in the process of developing a Backend using Express and following the MVC Model. However, I am uncertain about where to handle errors effectively. I have integrated express-async-errors and http-errors, allowing me to throw Errors anywher ...

Troubleshooting auxiliary routes in Angular: why won't they work

I am facing an issue where I am trying to load components into a router outlet nested within another component. Within my ProgramComponent (with the selector app-program), I have defined a router outlet. <a routerLink="admin1">One</a> <a ro ...

The exported variable 'SAlert' is utilizing the name 'AlertInterface' from an external module

Utilizing the antd alert component (ts) with styled components import styled from 'styled-components'; import Alert from 'antd/es/alert'; export const SAlert = styled(Alert)` && { margin-bottom: 24px; border-radiu ...

Reversing a Firebase list in Angular 2 after inserting a new item: A step-by-step

I am currently looking for a solution to reverse my Firebase list in real-time. For instance: Let's say I have the following Firebase list: {apple, orange, banana}; == After reversing => {banana, orange, apple} If I were to add a new item (with ...

Converting a promise of type <any> to a promise of type <entity>: A beginner's guide

As a newcomer to TypeScript and NestJS, I am wondering how to convert Promise<any[]> to Promise<MyEntity[]> in order to successfully execute the following code: const usersfromTransaction = this.repoTransaction .createQueryBuilder() ...

Changing the type of value in a React select onChange

<Select options={options} value={selectedBusinessList} isMulti placeholder="Select Business" onChange={(value: any) => setSelectedBusinessList(value)} onInputChange={query => { if ...

Why do variables in an HTML file fail to update after being navigated within onAuthStateChanged?

Currently, I am working with Ionic 5 and Firebase. Everything is running smoothly until I implemented the onAuthStateChanged function to persist login for authenticated users. Here is the code snippet: this.ngFireAuth.onAuthStateChanged((user) => { ...

Incorporate axios within getStaticProps while utilizing Next.js

I am working on a new project where I am utilizing axios to handle request data. However, I am facing an issue when using axios in the getStaticProps function which results in an error on my index.js page. Here is a snippet of my index.js code: import ...

Tips for dynamically populating a mat-table dataSource

While working with backend data streaming, I encountered an issue where trying to push an event to dataSource resulted in an error stating that dataSource is not defined. Can anyone provide guidance on how to dynamically add data to a materialize table? s ...

Integrate incoming websocket information with state management in React

I am facing a challenge in creating a timeseries plot with data obtained from a websocket connection. The issue arises when new values overwrite the previously stored value in the state variable. const [chartData, setChartData] = React.useState(null) Cu ...

Angular 2 and its commitment

Currently, I am following the Angular 2 tutorial for the Hero App which includes a section on Http requests. You can find the tutorial here. In the hero.service.ts file, there is a method called getHeroes() that makes a call to the server: getHeroes(): ...

Helping React and MUI components become mobile responsive - Seeking guidance to make it happen

My React component uses Material-UI (MUI) and I'm working on making it mobile responsive. Here's how it looks currently: But this is the look I want to achieve: Below is the code snippet for the component: import React from 'react'; i ...

retrieve data from URL parameters (navigation backward)

When navigating from the main page to the transaction page and then to the details page, I have implemented a go back feature on the details page. Using the state, I pass data when navigating back so that I can access it again from the transaction page. H ...

Display a loading indicator when loading a lazy loaded module in Angular 2

Here's my situation: I have a menu with various options that should be displayed based on user permissions. The majority of the menu items are contained within modules, and these modules are lazy loaded. This means that when a user clicks on a menu it ...

Tips on clearing and updating the Edit Modal dialog popup form with fresh data

This code snippet represents my Edit button functionality. The issue I am facing is that I cannot populate my Form with the correct data from another component. Even when I click the (Edit) button, it retrieves different data but fails to update my form, ...

I am searching for the vector geometric shapes svg elements that are commonly utilized in design editors. Can you point

When it comes to design editors, there are plenty of options such as Canva, Vistacreate, and Adobe Express. Each one uses a variety of styles for elements/objects/shapes. Are there any databases where I can find these resources? Some popular places include ...

A guide to effectively unit testing StripeJs within the Karma testing framework for Angular 8

I'm currently facing a challenge in unit testing a payment component that relies on StripeJS. In my 'ng-app.js' file, I import it as follows: stripe: /*@ngInject*/ function ($ocLazyLoad) { return $ocLazyLoad.load({ ...