Avoid referencing unbound methods which may cause unintentional scoping of `this`

Question

Hi any idea on how to prevent

error Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method

16:41  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  16:62  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  17:34  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  18:35  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  18:56  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  20:40  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method
  21:46  error  Avoid referencing unbound methods which may cause unintentional scoping of `this`  @typescript-eslint/unbound-method

import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
  registrationForm: FormGroup;

  constructor() { }

  ngOnInit() {
    this.registrationForm = new FormGroup({
      companyName: new FormControl('', [Validators.required, Validators.email]),
      name: new FormControl('', [Validators.required]),
      email: new FormControl('', [Validators.required, Validators.email]),
      password: new FormGroup({
        password: new FormControl('', [Validators.required, Validators.minLength(8)]),
        repeatPassword: new FormControl('', [Validators.required])
      }, {validators: [this.passwordMismatchValidator()]})
    });
  }

  onRegistrationFormSubmit() {
    if (!this.registrationForm.valid) {
      return;
    }
  }

  passwordMismatchValidator(): ValidatorFn {
    return (c: AbstractControl): ValidationErrors | null => {
      const password = c.get('password')?.value;
      const repeatPassword = c.get('repeatPassword')?.value;

      if (password !== repeatPassword) {
        return {'passwordMismatch': true};
      }

      return null;
    };
  }
}

user_3628251 · Answer

See this issue. It seems that you must do one of the following:

the Angular library changes from a static method, to a static arrow function property.

the Angular library annotates its functions with something like this: void which we can build handling for in this rule.

you, the user, disable comments.

For the time being I guess the only solution consists in either disabling the rule entirely on the line/file/project level or in changing the severity from error to simple warning.

For the former case, just add the following:

before the line that gives you the error (to disable the error just on that line):
```
// eslint-disable-next-line @typescript-eslint/unbound-method
```
at the top of the file where the error is shown (to disable the error in the whole file):
```
/* eslint-disable @typescript-eslint/unbound-method */
```
you can also enable it again in the same file if you want to only skip a section by putting the following line:
```
/* eslint-enable @typescript-eslint/unbound-method */
```
in the rules section of your eslint configuration file (i.e. .eslintrc.json) (to disable the error in the whole project):
```
"@typescript-eslint/unbound-method": "off"
```

In the latter case, put the following in the rules section of your eslint configuration file (i.e. .eslintrc.json) (to show a warning instead of an error in the whole project):

"@typescript-eslint/unbound-method": "warn"

EDIT: for the Angular Validators.*, you can alternatively overwrite the rule in your eslint configuration file (see the documentation):

"@typescript-eslint/unbound-method": [
    "error",
    {
        "ignoreStatic": true
    }
],

Avoid referencing unbound methods which may cause unintentional scoping of `this`

1 Answers