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

Creating a dynamic form with Angular 7 using ngFor and ngModel, incorporating validation through ngFrom attribute

I am currently working on developing an Angular input form that resembles a table. Here is my current approach: HTML: <form (ngSubmit)="doSomething()"> <table> <thead> <tr>First Name</tr> <tr>Last ...

The Angular HttpClient Service will exclusively provide responses that have a status code of 200

I'm facing an issue with my login component where it calls an http client service to send a request to the server for logging in. Everything works smoothly when I enter valid credentials, but if I input wrong credentials, the service doesn't seem ...

How can I create a box-shaped outline using Three.js?

As someone new to threejs, I have been trying to figure out how to render a transparent box around a symbol in my canvas. The box should only display a border and the width of this border should be customizable. Currently, I am using wireframe to create a ...

What is the best method for installing the most recent 1.1.5 version of is-callable?

After running the command npm install, an error occurred: npm ERR! code ETARGET npm ERR! notarget No matching version found for is-callable@^1.1.5. npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a ...

The occurrence of a loading error arises when attempting to load the second component, displaying the message 'The template instructed for component SidebarComponent is

My journey with Angular has just begun, and I decided to challenge myself by creating a simplistic dashboard. In order to achieve this, I developed two components called DashboardComponent and SidebarComponent. The DashboardComponent loads smoothly witho ...

Compiling TypeScript: Using the `as` operator to convert and then destructure an array results in a compilation error, requiring an

I am currently utilizing TypeScript version 2.9.2. There is a static method in a third-party library called URI.js, which is declared as follows: joinPaths(...paths: (string | URI)[]): URI; I have a variable named urlPaths that is defined as urlPaths: s ...

How to Add a Rule to an Existing Application Load Balancer Listener using AWS CDK

When I inherited a project, I discovered an application load balancer with a HTTPS Listener that was set up before I began using CDK. This listener currently has 13 rules in place that route requests based on hostname to different fargate instances, with ...

Is SASS stylesheet supported by the Angular 2 Ahead-of-Time compiler?

Considering giving Angular 2 Ahead-of-Time compilation another shot. I'll have to do some significant refactoring since my current custom build process will need to be reworked. Prior to diving in, I'm curious: if I reference external .scss fil ...

Utilizing the namespace importation method correctly

How can I efficiently utilize classes from a namespace that may be the same or different from the current file's namespace? I currently have the following two files. TypeA.ts: export namespace Game { @ccclass export class TypeA extends cc.Component ...

Filter through the array of objects using the title key

I'm attempting to extract specific data by filtering the 'page_title' key. Below is a snippet of my JSON object: { "page_components": [ { "page_title": "My Account", "row_block": [ { "heading": "", "sub_headi ...

Issue encountered while deploying Firebase Functions: Unable to parse function triggers

Experiencing difficulty deploying firebase functions from an angular project after updating to the latest firebase-tools 7.8.1 version. The project's package.json contains "firebase-admin": "~6.0.0", "firebase-functions": "^2.1.0", and "firebase-funct ...

Navigating in Angular using a "complete URL" (URL with parameters) can be achieved with the following steps:

My search page is equipped with numerous filter options, all of which are included as parameters in the URL for easy sharing. When moving from the search results to a detailed view of an item, I pass the complete search result URL as a parameter (detail/1? ...

Testing Angular components with Karma Server: An uncaught promise rejection occurred stating, "The code should be executed within the fakeAsync zone."

For my unit test development, I am utilizing karma. In some of my test cases, I have used fakeSync - tick() and promises. Although my tests are running successfully, there seems to be an issue with the karma server: my test.spec.ts : import { async, Co ...

Exploring the sharing of observables/subjects in Angular 2

UPDATE: After further investigation, it appears that the SharedService is being initialized twice. It seems like I may be working with separate instances, causing the .subscribe() method to only apply to the initiator. I'm not sure how to resolve this ...

The TypeScript error TS7006 is indicating that the parameter '_' is assumed to have an undefined type

In my Angular application, I have a class that implements ControlValueAccessor from the '@angular/forms' library: export abstract class CustomControl implements ControlValueAccessor { private _value: any = ''; private onChange ...

Exploring the functionality of anchor tags in Angular: what makes them tick?

After recently diving into Angular development, I've come across a curious issue: anchor tags seem to be malfunctioning when clicking on the text inside. Here is the code snippet in question: <a href="{{ downloadAddress }}"><i class="fa fa- ...

When the browser is refreshed in Angular, the default root component will show up instead of the one specified in routes

I'm facing an issue with browser refresh on my Angular application. Every time I reload the page, either by refreshing the browser or entering a URL, the app redirects to the "/" route. Despite trying various solutions, none seemed to resolve the iss ...

When attempting to declare a functional component in React utilizing styled-components in TypeScript, an error is encountered stating "No overload matches this call."

Playground https://codesandbox.io/s/typescript-type-checking-question-0b42t Sample Code type BadgeTypes = { success: string; secondary: string; alert: string; text: string; }; type Theme = { fonts?: object; borderRadius: string; primary?: o ...

Having difficulty transferring navigation props between screens using react-navigation

Within my ContactList component, I have utilized a map to render various items. Each item includes a thumbnail and the desired functionality is that upon clicking on the thumbnail, the user should be directed to a new screen referred to as UserDetailsScree ...

Struggling to run my Pact tests using Karma and Angular

I'm struggling to run pact tests with Karma in my Angular app setup. Below is the relevant snippet from my package.json. "@angular/core": "~13.3.6", "@pact-foundation/karma-pact": "^3.1.0", "@pact-foundatio ...