Setting the default value in a Reactive form on the fly: A step-by-step guide

When creating a table using looping, I need to set the default value of my Reactive Form to `Repeat` if the loop value matches a particular character, otherwise I want it to be empty. Here is my code:

typescript

rDefault:string = "";
    create(){
        let form = this.fb.group({
        rp:[this.rDefault]});
        return form;
    }
    

template

<tbody *ngFor="let c of ch.vl; let i = index" [formGroupName]="i">
        <tr class="ui-widget-content ui-datatable">
            <td>
            {{rpm[ofs+i].label}}
            </td>
            <td>
                <p-dropdown formControlName="rp" [options]="rpm[ofs+i].label =='REPEAT'? compOpt : []" appendTo="body" [disabled]='rpm[ofs+i].label == "REPEAT"?false:true'></p-dropdown>  
            </td>
        </tr>
    </tbody>
    

If {{rpm[ofs+i].label}} is equal to "Repeat", I want to automatically set the default form values to "Repeat", otherwise keep it empty. How can I achieve this?

Answer №1

Found a solution for my query, but uncertain if it's the correct approach?

Within each loop, I'm invoking another method from [option] to set the value.

template file

    <td>
        <p-dropdown formControlName="rp" [options]="changeDefault(rpm[ofs+i].label)" appendTo="body" [disabled]='rpm[ofs+i].label == "REPEAT"?false:true'></p-dropdown>  
    </td>

Updated TS file

rDefault:string = "";

//this method will change value of rDefault
changeDefault(val){
    this.rDefault = val == "REPEAT" ? "REPEAT" : "";
    let rtnar = 'REPEAT'? this.compOpt : [];
    return rtnar;
}
//

create(){
    let form = this.fb.group({
    rp:[this.rDefault]});
    return form;
}

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

Exploring the capabilities of referencing MongoDB documents with the populate method in Node.js

I have been working on referencing in Node.js using the populate method, but I am unsure about how exactly it works. In my code, I am creating a reference to the user collection from my child collection. I have two collections - one for children and anothe ...

In Angular 4 applications, all vendor CSS files are converted into style tags at the beginning of the HTML document

In my Angular 4 project, I have integrated Bootstrap, Fontawesome, and some custom CSS. However, all these styles are rendering as separate tags at the top of my index.html file. I would like them to be combined into a single bundled CSS file for better ...

How to exit a dialog in an Angular TypeScript component with precision

Hey there, I'm attempting to close a dialog from the component by specifying the path in .angular-cli.json and calling the function. However, it seems that despite my efforts, the dialog isn't closing and the redirection isn't happening. He ...

Unable to retrieve data upon page refresh in Next.js

I encountered an issue while trying to develop a basic Next.js page using data fetched from the backend. I am utilizing useSWR for fetching the data. When I refresh the page or load it for the first time after running in development mode, I face a TypeScr ...

The issue with Nuxt's vue-Router page transitions not functioning properly is due to the presence of a request

Encountering an issue with the combination of nuxt/vue-router page-transitions and the JavaScript method rerequestAnimationFrame. Currently, I am animating a container of items using rerequestAnimationFrame along with the transform: translate CSS property. ...

What is the best way to organize and sort mysql data without disrupting operations?

I've been searching for information on this topic but haven't been able to find a tutorial that explains exactly what program to use. I have a MySQL database with expenses data. What I need is for the system to automatically categorize a new ex ...

Issue encountered: Unable to locate module: Error - Unable to resolve '@cycle/run' with webpack version 2.2.1

I am attempting to run a hello world application using cycle.js with webpack 2.2.1. The following error is being displayed: ERROR in ./app/index.js Module not found: Error: Can't resolve '@cycle/run' in '/Users/Ben/proj/sb_vol_cal ...

Discovering and revising an item, delivering the complete object, in a recursive manner

After delving into recursion, I find myself at a crossroads where I struggle to return the entire object after making an update. Imagine you have an object with nested arrays containing keys specifying where you want to perform a value update... const tes ...

Strategies for efficiently loading 100,000 records into a table using Spring Boot on the server side and Angular on the front end

I am facing an issue with the speed of loading data from the back end to the front end without causing delays on the client side. I am using Spring Boot for the back end and Angular 7 for the front end. The problem arises when I submit a request from the f ...

An issue with the validation service has been identified, specifically concerning the default value of null in

Using Angular 10 and Password Validator Service static password(control: AbstractControl) { // {6,100} - Check if password is between 6 and 100 characters // (?=.*[0-9]) - Ensure at least one number is present in the strin ...

Utilizing JS datepicker for multiple input fields sharing a common class

After trying to implement the js-datepicker plugin from https://www.npmjs.com/package/js-datepicker, I ran into an issue. I have multiple input fields in which I want to use the same date picker, so I assigned them all the class 'year'. Unfortuna ...

Creating a back button for returning to the previous page

I have created an Angular application that retrieves data from an API. However, I am facing an issue where the data is lost when navigating to another route and then returning to the table route. Is there a way to switch routes without losing the data? &l ...

Using a wildcard (*) to select elements with JQuery

I'm just starting to learn about JQuery and could use some help. I want to select multiple elements but I only know part of their Ids: for example: <div id="element32422455">Some content</div> <div id="element68475124">Some content& ...

Managing repeated calls to a specific get function in nodejs

Utilizing an Ajax call, I am invoking the following GET function every 10 seconds to monitor the status of various URLs. app.get('/getUrl', function(req, res) { var response = {}; var keyArr = []; var urlData ...

Conceal or reveal buttons using JavaScript

I am struggling with a function that is supposed to hide certain buttons and create a new button. When I click on the newly created button, it should make the previously hidden buttons visible again. However, the function does not seem to work properly. ...

`Populating fields in Firebase``

I am currently in the process of transitioning from a Mongoose + Express app to using Firebase + Express. However, I am facing some challenges with populating related fields similar to how it is done in Mongoose. Is there a more efficient way to achieve th ...

Trouble arises when attempting to parse multiple objects from a JSON file using JavaScript

Encountering JSON parsing issues with multiple JSON objects. JSON data is essential for JavaScript functionality. { "name": "Sara", "age": 23, "gender": "Female", "department": & ...

"Error occurs as a result of an unspecified attribute in the map

Hello, I am currently traversing a tree structure recursively. To handle undefined nodes in the tree, I have implemented guards to prevent any failures. However, during the mapping of children nodes, I encountered the following error: Error Output Adri ...

Retrieving the output of an asynchronous function within another function in JavaScript

I'm facing an issue with the Chrome API functions being asynchronous, making it difficult for me to get their return value. Here's a snippet of code that demonstrates my problem. I'm working with AngularJS. $scope.storageGet = function( ...

Encountered an error: Object(...) does not conform to function standards in the handleChange method

When using JavaScript, everything works fine. However, when trying to implement TypeScript with the handleChange function, an error is consistently thrown whenever something is typed into the entries. The error message reads: "TypeError not captured: Objec ...