Argument of type '(fg: FormGroup) => { notmatched: boolean; }' is not assignable to parameter of type

Question

I'm getting error like that (as u see in title). I have been working on this project for 2 days.

HTML Code:

<div class="container pt-5">
  <h2 style="text-align: center;">Reactive Forms</h2>
  <div class="row justify-content-sm-center pt-5">
      <div class="col-sm-6 shadow round pb-3">
        <h1 class="text-center pt-3 text-secondary">Example Form</h1>
          <form [formGroup]='exform'>

            <div class="form-group">
              <label class="col-form-label">Email:</label>
              <input formControlName="email" type="text" class="form-control" >
              <small *ngIf="email.invalid && email.touched" class="text-danger">Email is Required</small>
            </div>

              <div class="form-group" >
                <label class="col-form-label">Şifre:</label>
                <input formControlName="password" type="password" class="form-control">
                <small *ngIf="password.invalid &&  password.touched" class="text-danger">Parola Gerekli</small> 
              </div>

              <div class="form-group">
                <label class="col-form-label">Şifre Tekrarı:</label>
                <input formControlName="password2" type="password" class="form-control" >
                <small *ngIf="password2.invalid && password2.touched" class="text-danger">Parola Tekrarı Gerekli</small>
                <small *ngIf="password2.invalid && password2.touched" class="text-danger">Parola Uyuşmuyor</small>
              </div>

              <button [disabled]="exform.invalid" type="button" class="btn btn-primary">Send message</button>
            </form>
      </div>
  </div>
</div>

app.components.ts Code: (problem line: this.passwordMatchValidator);

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  
  exform!: FormGroup;

  message!: string;



  ngOnInit(){
    this.exform= new FormGroup({

      email: new FormControl(null, [Validators.required, Validators.minLength(4), Validators.email]),

      password: new FormControl(null, [Validators.minLength(8), Validators.required]),
      
      password2: new FormControl(null,[Validators.required, Validators.minLength(8)])
       }, this.passwordMatchValidator);
       console.log('Im here')
   }

   passwordMatchValidator(fg: FormGroup){
    
     return fg.get('password')?.value===fg.get('password2')?.value ? null : {notmatched: true}
   }



   clickSub()
   {
     console.log("clicked");
     this.exform.reset();
   }

   get email(){
     return this.exform.get('email');
   }
  
   get password(){
    return this.exform.get('password');
  }

  get password2(){
    return this.exform.get('password2');
  }

}

app.modelu.ts Code:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppRoutingModule } from './app-routing-module';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { AppComponent } from './app.component';
    
    
    @NgModule({
      declarations: [
        AppComponent,
        
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        ReactiveFormsModule,
        FormsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app-routing-module.ts Code:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Error: src/app/app.component.ts:27:11 - error TS2345: Argument of type '(fg: FormGroup) => { notmatched: boolean; }' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions'. Type '(fg: FormGroup) => { notmatched: boolean; }' is not assignable to type 'ValidatorFn'. Types of parameters 'fg' and 'control' are incompatible. Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more.

27 }, this.passwordMatchValidator);

Where is the problem?

Answer 1

Just change the type of the input.

   passwordMatchValidator(fg: AbstractControl){
     return fg.get('password')?.value === fg.get('password2')?.value ? null : {notmatched: true}
   }

Please read the error correctly, it is written very clearly.

Answer 2

Try disabling strictFunctionTypes in the "tsconfig" file:

"compilerOptions": {
    "baseUrl": "src",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "strictFunctionTypes": false,
    "strictNullChecks": false,