Here is what I currently have:
<div *ngFor="let step of validationSteps; let i = index ">
<input matInput placeholder="SQL Query" name="sqlQuery" [(ngModel)]="validationSteps[i].sqlDetail.query">
</div>
Is there a way to dynamically change the name attribute to "sqlQuery{i}"?
Similar to other bindings, you can use {{i}} for a regular attribute or [attr]="'name'+i" for a bound attribute: Check out this Stackblitz example
Here is an example based on your situation:
<div *ngFor="let step of validationSteps; let i = index ">
<input matInput
placeholder="SQL Query"
name="sqlQuery{{i}}"
[(ngModel)]="step.sqlDetail.query">
</div>
Alternatively, you could also use:
<div *ngFor="let step of validationSteps; let i = index ">
<input matInput
placeholder="SQL Query"
[name]="'sqlQuery' + i"
[(ngModel)]="step.sqlDetail.query">
</div>
This is how your code will look
[name]="'sqlQuery'+i"
Here is the full code snippet
<input matInput placeholder="SQL Query" [name]="'sqlQuery'+i" [(ngModel)]="validationSteps[i].sqlDetail.query">
Please inform me whether it is functioning correctly or not.
I am currently loading content from external HTML files, specifically page1.html and page2.html. Although everything is the same except for the pictures and text, I am encountering an issue with the close button. It only closes page1.html.Feel free to chec ...
There are 3 words that I want to rotate on their x-axis every 2 seconds (repeating). Using jQuery: $(function () { count = 0; wordsArray = ["Innovation", "Creativity", "Success"]; setInterval(function () { count++; $("#words").text(wordsArray[co ...
My current project involves working with a table, and I have encountered some challenges along the way. Typically, I have 4 input fields where I can input data that is then sent to the table in my view. However, if I exceed 4 values and need to add more, I ...
I keep encountering the "InternalError:too much recursion error" in my Angular project. Despite my efforts, I am unable to determine the root cause of this issue. Is there a method available to help me diagnose where this error is coming from? Any assistan ...
Having a data array like this "item_tabel": [ { "method": { "select_method": 6, }, "innovation": { "select_innovation": 2, }, } ], How do I calculate the sum? This i ...
<---------------------MODIFICATION------------------------> I initially thought I needed multiple onChange functions, but after reviewing the answers provided, I discovered a solution thanks to the helpful user's response. With some experimenta ...
I'm currently using the Turbolinks.visit action with the help of $(document).on("input");... HTML <form id="mainSearch" method="get" autocomplete="off"> <input type="search" name="s" placeholder="Search" /> </form> Javascript ...
Below are some input fields: <input type="text" name="date_1" class="dataList" value="2009-12-30" /> <input type="text" name="date_2" class="dataList" value="2007-06-12" /> <input type="text" name="date_3" class="dataList" value="2009-10-23 ...
While working on a directive calendar, I encountered an issue: I am integrating dynamic tables and want to filter based on an ngModel from the parent controller, but I am facing difficulties in capturing the changes of the ngModel when using dynamic table ...
I've been trying to implement a difficulty filter based on checked checkboxes, but despite my ongoing search for solutions, I haven't been able to find any promising results or clear directions. Exploration I came across a code snippet that see ...
In his book, "JavaScript: The Good Parts," Crockford emphasizes the importance of giving constructor functions names with an initial capital letter (e.g., Point) and using function names with initial capital letters only with constructor functions, while e ...
After running some tests on my NativeScript app following the steps outlined here - , I found that it takes 18 seconds for the program to start and for a user to log in. Is this considered acceptable performance? Appreciate any feedback provided! ...
Currently, I am utilizing Webpack 2 to import components using a special syntax with require. Among the over 100 components available, only around 5-10 are used at any given time. These components share some common functionality such as props and lifecycl ...
I have implemented a script to display an additional language menu, which functions perfectly. However, I encountered an issue where if the user selects a language and then decides to remove it by clicking on "Remove", the field is hidden but the value sti ...
As a newcomer to the MEAN stack, I am attempting to create some basic posts. However, I keep encountering an error that reads TypeError: Cannot read properties of undefined (reading 'title') when trying to issue a post. The strange thing is, when ...
I am currently engaged in a project for a small theater group, and I am facing challenges with getting this loop to execute properly. <% include ../partials/header %> <div class="jumbotron jumbotron-fluid"> <div class="container"> ...
I am attempting to calculate the distance between the top of an element and the top of the page every time the user scrolls. Although I have managed to make it work, the issue arises when scrolling - the distance remains unchanged. I tried addressing this ...
Currently, I am utilizing Angular and SCSS for my style needs. In SCSS, I have the ability to declare variables and reuse them later on. For instance: $color-accent: #30bdff; $color-accentLight: mix(white, $color-accent, 90%); However, what happens if a u ...
As I work on developing a basic invoice generator application, I encounter an issue with overflowing content in the "notes" section when passing data through props from the App.js file. Instead of wrapping the text, it overflows its container. import "./Ap ...
While utilizing the NFC library, I followed the Ionic documentation recommendations at (https://github.com/chariotsolutions/phonegap-nfc) and (https://ionicframework.com/docs/native/nfc). However, when trying to access the code in my component that calls ...