Encountering an error message: [$parse:syntax] when trying to implement ng-class

I'm currently working on developing custom form validation, utilizing ng-class to emphasize required fields. Here is the syntax I am using:

<div class="form-group"
    ng-class="{'has-error': dc.{fname}.nedatt({{fname}}.username)}">
    <input class="form-control" name="username" type="text" placeholder="Username"
           ng-required="true" ng-model="f1username"/>
           <span class="help-block" ng-show="{{fname}}.username.$error.required">Required</span>
</div>

When applying ng-class, I encounter the following error message:

Error: [$parse:syntax]                  
http://errors.angularjs.org/1.3.3/$parse/syntax?p0=.&p1=not%20a%20primary%20expression&p2=1&p3=.username.%24error.required&p4=.username.%24error.required

And when configuring the help block, I receive this error:

SyntaxError: Unexpected token ;

I am using fname as a placeholder for the form's name which will be replaced later, hence encapsulating it within {{}}. Any assistance in resolving these issues would be greatly appreciated as I am currently stuck.

Answer №1

When using ng-class, you cannot bind an angular expression in that way. Instead, it is recommended to use javascript notation. For example:

<div class="form-group"
    ng-class="{'has-error': dc[fname].nedatt(getFormObject(fname).name)">
</div>

It seems like you are attempting to dynamically access the object to check the name property. Unfortunately, this approach will not work as the object needs to be fixed and not a string. I would suggest creating a function in your controller or directive that returns the correct object, and then manipulate it accordingly.

For ng-show, a similar implementation is advisable. Just remember that it won't be parsed as a string but evaluated directly (and {{foo}} is not the correct syntax in javascript).

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

Stopping a Bootstrap Modal Closure When Validation Errors are Present

I'm dealing with a bootstrap model within a .NET MVC5 app. Although my client-side validation is functioning properly (using jquery unobtrusive in MVC), I have encountered an issue where the modal keeps closing even when there are errors present. How ...

Ways to modify the end result using callback information

In my scenario, I am working with an object that has keys id and name as shown below. The goal is to retrieve the customer name based on the id and then update the object accordingly. Const arr=[{id:1,name:''},{id:2,name:''}]; ...

What advantages does the Step function (AWS) offer compared to setTimeout (Javascript) for scheduling tasks?

I am currently in the process of developing an API service that allows any client to provide me with their HTTP request along with the desired time in seconds for execution. I have considered two potential approaches to achieve this: Utilizing a lambda f ...

Bringing an AMD module into a Mocha test

I recently encountered an error while using Mocha to test code that was exported as an AMD module. When running the Mocha test, I received the following error message: ReferenceError: define is not defined at Object.<anonymous> (/home/malintha/proje ...

Looking to merge two components into one single form using Angular?

I am currently developing an Angular application with a dynamic form feature. The data for the dynamic form is loaded through JSON, which is divided into two parts: part 1 and part 2. // JSON Data Part 1 jsonDataPart1: any = [ { "e ...

ng-repeat isn't displaying the data

I have always been comfortable using the ng-repeat in Angular, but this time I seem to be facing a problem. I am trying to populate my DOM with data from a JSON file, but for some reason, the fields are not displaying as expected. Is there something wrong ...

Numerous occurrences of Setinterval

I am currently facing a minor issue with my code. My setup involves an auto-playing rotating fadeIn fadeOut slider, where clicking on a li will navigate to that 'slide' and pause the slider for a specific duration. The problem arises when a use ...

Making AngularJS 'PUT' requests: The process of submitting only the data in a form

I am facing an issue while updating user data in Angular. When I send a 'PUT' request, the entire user $scope is being sent instead of only the fields visible on the form. To retrieve and update the data, I am using a Factory. Below is my edit f ...

Persisting Undefined Values Even After Proper Prop Passing

I'm currently working on fetching and passing coaching data as props to another component for rendering on the frontend. I need to pass these props to the CoachingCard Component in order to display the coaching values. However, I'm encountering ...

Transferring information from one page to the next

How can I efficiently transfer a large amount of user-filled data, including images, between pages in Next.js? I've searched through the Next.js documentation, but haven't found a solution yet. ...

Adding a new item automatically- Angular UI inquiry

I'm in the process of implementing a 'new stories' feature on a website where authors can contribute their work. The current function I have allows for the creation and addition of stories to an author's profile, but it doesn't aut ...

Combine the information from 3 separate subscriptions into a single object using RxJS in Angular 9

I am seeking assistance with merging data from 3 different sensors into one object. I am using Cordova plugins to retrieve accelerometer, gyroscope, and magnetometer data. However, I am facing an issue in subscribing to all three observables simultaneously ...

`What purpose does the data-view attribute serve in Durandal JS?`

While experimenting with the Durandal JS starter kit application, I happened to view the page source in Mozilla browser and noticed the following. <div class="" data-view="views/shell" style="" data-active-view="true"> </div> I couldn't ...

Making a Jquery Ajax Request in Real Time

Is there a way to make sure that the "Test Data" text is only displayed in the console after the book details are fully loaded into vm.books? I am trying to make a synchronous ajax call for this purpose. The code below is not producing the expected result ...

Can you provide a basic illustration of how routes are implemented in AngularJS?

After searching through numerous examples of using Routes with Angular, I have unfortunately not been able to find a working solution. Even the example provided in the official guide did not work properly (clicking on it resulted in a wrong URL that did no ...

Tips for transferring the clicked value to the next page

Recently, I started working with Ionic and developed an application using it. Now, I am facing a challenge where I need to pass the value from the first page to the second page. To illustrate this more clearly, I have attached two photos. Here is the imag ...

At what point does Angular erase the $watch?

As I delve into Angular and add models to my view, I am aware that each one enters the digest loop and has a $watch function applied to it. Since Angular apps are essentially single page applications, this process is crucial for updating data across the ap ...

Adjust the minimum height and width when resizing the window

Apologies in advance if this has already been addressed, but I have tried solutions from other sources without success. My Objective: I aim to set the minimum height and width of a div based on the current dimensions of the document. This should trigger ...

Disabling the past dates on a date picker based on the selected date from another date picker

Is it possible to disable past dates in the End Date picker based on the selected date in the Start Date picker? For example: If I choose 20th November 2019 as the Start Date, I want to prevent selection of any past dates in the End Date picker. <ht ...

Change from one value to another using a decaying sinusoidal wave

Can someone help me come up with a formula that will smoothly transition from a starting value to an end value over a specified time using a Sin or Cos wave? I'm attempting to replicate a bouncing effect like the one shown in my sample using CSS and ...