"Learn the method of connecting a dynamic value to an input field through the use of ng-repeat and ng

I've encountered an issue trying to bind a value to an input in Angular. I initialized the 'object[component.name]' first and then assigned that value to ng-model. This was necessary because I needed to bind the value from ng-repeat, but it's giving me an error. Below is my code snippet. Any assistance would be greatly appreciated.

<div ng-repeat="component in reportTemplate" class="inputFieldSection inputFieldTitle" ng-if="component.type == 'text'">
                          <label class="item item-input">
                            <input type="text" name={{component.name}} ng-init="object[component.name]={{component.name}}"  ng-model="object[component.name]" ng-focus="clearValidation();" max-length="50" required placeholder="{{component.label}}">
                          </label>
                          <p ng-show="createReportForm.{{component.name}}.$error.required">Please Enter {{component.name}}</p>
                   </div>

Console Error Message:

ionic.bundle.js:25510 Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 25 of the expression [object[component.name]={{component.name}}] starting at [{component.name}}].
 http://errors.angularjs.org/1.4.3/$parse/syntax?p0=%7B&p1=invalid%20key&p2=…Bcomponent.name%5D%3D%7B%7Bcomponent.name%7D%7D&p4=%7Bcomponent.name%7D%7D
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:13248:12
at Object.AST.throwError (http://localhost:8100/lib/ionic/js/ionic.bundle.js:26061:11)
at Object.AST.object (http://localhost:8100/lib/ionic/js/ionic.bundle.js:26048:16)
at Object.AST.primary (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25956:22)
at Object.AST.unary (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25944:19)
at Object.AST.multiplicative (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25931:21)
at Object.AST.additive (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25922:21)
at Object.AST.relational (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25913:21)
at Object.AST.equality (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25904:21)
at Object.AST.logicalAND (http://localhost:8100/lib/ionic/js/ionic.bundle.js:25896:21) <input type="text" name="{{component.name}}" ng-init="object[component.name]={{component.name}}" ng-model="object[component.name]" ng-focus="clearValidation();" max-length="50" required="" placeholder="{{component.label}}" class="ng-pristine ng-untouched ng-valid">

Answer №1

ng-show directive should not contain any {{}} interpolation directives within it. To access the createReportForm object, use the index object.

ng-show="createReportForm[component.name].$error.required"

Additionally, there is a similar issue with the ng-init directive:

ng-init="object[component.name] = component.name"

It is unclear why you are utilizing the ng-init directive; it is generally recommended to avoid using it.

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

The functionality of Javascript Array.splice suddenly malfunctioned in my Angular application

While working on a project in Angular 4, I encountered a situation where I needed to batch through an array of ids. I would send the removed items to an Observable function, and upon the subscription returning, I would check the remaining array before loop ...

Tips on redirecting the treeview menu using Material-UI 4

Currently, I am utilizing Material UI 4's Treeview component. However, I am struggling to figure out how to include a parameter that allows me to redirect to other pages when the user clicks on an item. In the past, I relied on a different method. Ch ...

Showing an error in Quasar Stepper when a required field is left empty

Working with the Quasar framework, I have created a stepper with several fields in each step. Some of these fields are required, as shown below: <q-stepper dense v-model="step" ref="stepper" color="primary" animated header ...

Is there a solution to prevent the default parameters in Angular UI router from causing consecutive slashes in the URL, such as http://example.com/#/deliverables////?

Below are a few states extracted from my application: angular.module("app").config([ '$stateProvider', '$urlRouterProvider', '$httpProvider', function ($stateProvider, $urlRouterProvider, $httpProvider) { 'use strict ...

What type of data payload could be expected?

I am executing a graphql mutation: interface LogInResponse { email: { accessToken: number; } } const [logIn] = useMutation<LogInResponse>(LOG_IN); let submitForm = (email: string, password: string) => { setIsSubmitted(true); lo ...

What is the best way to replace multiple strings with bold formatting in JavaScript without losing the previous bolded text?

function boldKeywords(inputString, keywords){ for (var i = 0; i < keywords.length; i++) { var key = keywords[i]; if (key) inputString= inputString.replace(new RegExp(key, 'gi'), '<strong>' + ...

Issue with displaying Angular chart only resolves after resizing window following routing updates

Hey there! I'm having trouble getting my chart to show up after adding routing to my 3 tabs. Previously, without routing, everything worked fine. Now, the graph only appears after resizing the window. The chart is using PrimeNG chart with the Chart.js ...

Is it possible to move between textboxes using arrow keys in HTML?

Is there a way to navigate through textboxes using arrow keys in HTML without relying on jQuery? Possibly utilizing JavaScript, HTML, CSS, or another method? Thank you for your help! <body> <form> <input type="text"&g ...

Validating date parameter in Wiremock request - How to ensure dynamic date matching during testing?

Looking for some assistance in verifying that the date in a request is exactly Today. I've tried various methods from the documentation, but haven't achieved the desired outcome yet. Calling out to any helpful souls who can guide a junior QA thro ...

Display the division content from a user control without the need to open a separate window

Seeking assistance with a USER CONTROL containing a <div> element and a button. The goal is to successfully print the <div> content upon button click, regardless of the control's location. It's important that the printing process does ...

Things, their examples and the impact of setTimeOut

I'm currently delving into object oriented programming in JavaScript. function doStock() { //my class var that = this; var nAntiFreeze = null; // timeout ID var getContent = function(oInPageContainer) { GM_log('Antifreeze, before clea ...

The event bus I'm using isn't functioning properly within the axios interceptor, yet it operates smoothly in all my Vue components

Currently, I am utilizing VueJs and mitt for the eventBus. The mitt is globally loaded and functioning correctly as shown below: main.js const emitter = mitt(); const app = createApp(App) app.config.globalProperties.emitter = emitter I am able to call t ...

Encountering a problem with AngularJS when trying to pass a controller through ng-include in HTML

I'm currently developing a portal-style application that will dynamically inject HTML from other URLs (within the domain) into different sections of the page, which I like to refer to as widgets. Each widget needs to be loaded with an ng-include and h ...

Encountered an error with rootscope:infdig when utilizing ng repeat loop

I have been working on this issue for a while now but I can't seem to find a solution. Within an ng-repeat loop, I am calling a function parseBug. This function is supposed to modify two fields and convert them into an array. However, I encountered a ...

Is using resolve the sole method to transfer scope to an Angular-UI modal?

After using angular-ui alongside angularjs for quite some time, I encountered an issue related to passing objects in a directive's scope to a modal. While browsing through various suggestions on platforms like Stack Overflow, most solutions involved u ...

Sorting by two fields with varying value types in AngularJS

Need help sorting json data by two fields, prioritizing field value and then date. Check out this demo Json input [{ "title" : "Title 2", "pin" : false, "date" : 20130411204207 },{ "title" : "Title 3", "date" : 20140411204207 },{ "title" : "Title 4", ...

Spinning loader in jquery-mobile

I attempted to implement this functionality while Javascript is generating a timetable, causing a spinner loading display. I experimented with using $.mobile.pageLoading(); $.mobile.pageLoading(true); , as well as trying out the jQuery plugin availabl ...

Is there a way for me to retrieve the UrlMatcher from ui-router?

While exploring the ui-router documentation, I came across an object called UrlMatcher. This object contains useful methods like exec, but I am struggling to find clear instructions on how to access it. Nevertheless, the documentation page provides a detai ...

Is VueAxios compatible with the Vue composition API?

Currently, I find myself in main.js where I am importing vue-axios Main.js import { createApp } from 'vue'; import axios from 'axios'; import VueAxios from 'vue-axios'; import App from './App.vue'; const app = crea ...

What is the correct way to implement TypeScript with Array.prototype.reduce?

I am facing a challenge with my reduce function and I have tried multiple solutions without success: interface ITask { id: string; was: string; } //sampleData: const tasks = [ {id: "a", was: "Foo"}, {id: "b", was: & ...