Sonar displays an error stating "An assignment or function call was expected"

Question

Sonar displays an error stating "An assignment or function call was expected"

While working with NgRx, I came across the following error message:

'Expected an assignment or function call and instead saw an expression.'

I encountered a Sonar issue in my code snippet

this.sfForm.get('code')?.[this._mode ? 'disable' : 'enable']();

. I'm struggling to interpret this message from Sonar and figure out how to resolve it.

If anyone can help me understand the code better and assist in resolving the issue, that would be greatly appreciated.

<mat-form-field [formGroup]="sfForm">
  <input Input
         matInput
         (keydown.enter)="search($event.target.value)"
         [type]="''"
         formControlName="code"
         required>
</mat-form-field>

sfForm: FormGroup;
private _mode: boolean = true;
      
public set scanMode(value: boolean) {
  this._mode = value;
  this.sfForm.get('code')?.[this._mode ? 'disable' : 'enable']();
}

angular typescript ngrx angular-reactive-forms

Answer 1

Answer №1

Here is a breakdown explaining the process:

this.sfForm.get('code') // retrieving value by key "code"
?.                      // if the value is `undefined` or `null`, stop here (refer to #1)
[                       // otherwise, accessing property using expression within [square brackets]
    this._mode ?        // checking if this._mode is truthy...
        'disable'       // setting the property to 'disable'
        : 'enable'      // setting the property to 'enable'
]                       // (see #2 below)
()                      // calling the function associated with that property (with 0 arguments)

If we were to describe the code in a more detailed manner, it would resemble something like this:

const code = this.sfForm.get('code')

if (code !== null && typeof code !== 'undefined') {
    let modeFunction

    if (this._mode) {
        modeFunction = code.disable
    } else {
        modeFunction = code.enable
    }

    modeFunction()
}

Answer 2

Here is a breakdown explaining the process:

this.sfForm.get('code') // retrieving value by key "code"
?.                      // if the value is `undefined` or `null`, stop here (refer to #1)
[                       // otherwise, accessing property using expression within [square brackets]
    this._mode ?        // checking if this._mode is truthy...
        'disable'       // setting the property to 'disable'
        : 'enable'      // setting the property to 'enable'
]                       // (see #2 below)
()                      // calling the function associated with that property (with 0 arguments)

If we were to describe the code in a more detailed manner, it would resemble something like this:

const code = this.sfForm.get('code')

if (code !== null && typeof code !== 'undefined') {
    let modeFunction

    if (this._mode) {
        modeFunction = code.disable
    } else {
        modeFunction = code.enable
    }

    modeFunction()
}

Answer 3

Answer №2

If you are looking to apply labels, the method you used will not allow you to assign values in this way.

object[field]

Instead, consider using a structure like this:

this.sfForm.get('code')?.[this._mode] = this.sfForm.get('code')?.[this._mode] ? 'disable' : 'enable'

Alternatively, if you prefer to store the field in a variable, you can do so in a more concise manner.

Keep in mind that when using '?' assigns, only statements can be utilized and functions cannot be called within them.

Answer 4

If you are looking to apply labels, the method you used will not allow you to assign values in this way.

object[field]

Instead, consider using a structure like this:

this.sfForm.get('code')?.[this._mode] = this.sfForm.get('code')?.[this._mode] ? 'disable' : 'enable'

Alternatively, if you prefer to store the field in a variable, you can do so in a more concise manner.

Keep in mind that when using '?' assigns, only statements can be utilized and functions cannot be called within them.

Sonar displays an error stating "An assignment or function call was expected"

Answer №1

Answer №2

Similar questions

Tips for implementing md-icon in combination with md-autocomplete in Angular Material Design:

Choosing Between Absolute and Relative Paths for Angular Component's 'templateUrls'

Are there any potential performance implications to passing an anonymous function as a prop?

Errors encountered while trying to install the ngx-admin template through npm

What could be the reason for operators like tap and map not being invoked on the inner observable when combineLatest is used?

Caution: The absence of FIREBASE_CONFIG and GCLOUD_PROJECT environment variables may result in the failure to initialize firebase-admin

Discover the virtual scrolling feature in Angular's ng-select component

Issue with prop type: MUI - experiencing a warning while using ReactJS with MUI?

Sorting elements with a custom selector using Angular's ViewChild

The subcategory was not factored into my npm package

Tips for updating the barchart legend in an Angular application

The 'initializeOnMount' property is a necessary requirement within the definition of the 'MoralisProviderInitializedProps' type

Filtering in RxJS pipelines can be compared to an if-else statement

The absence of a scroll bar on the web application is preventing me from scrolling properly

Changing the size of a div component using Angular 6

Steps for reinstalling TypeScript

Retrieve the ultimate observable from a nested code block

One question I have is how I can successfully send a value within the RxJS subscribe function

Query parameters in Angular 5 that have a global scope

Incorporating Common Types for Multiple Uses