'(fg: FormGroup) => { notmatched: boolean; 类型的参数}' 不可分配给类型参数

Question

我遇到了这样的错误（正如您在标题中看到的那样）。我已经在这个项目上工作了 2 天。

HTML 代码：

<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 代码：（问题行：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 代码：

    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 代码：

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


const routes: Routes = [];

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

错误：src/app/app.component.ts:27:11 - 错误 TS2345：类型参数 '(fg: FormGroup) => { notmatched: boolean; }' 不可分配给类型为 'ValidatorFn | 的参数验证器Fn[] |抽象控制选项'。 类型 '(fg: FormGroup) => { notmatched: boolean; }' 不可分配给类型 'ValidatorFn'。 参数 'fg' 和 'control' 的类型不兼容。 “AbstractControl”类型缺少“FormGroup”类型的以下属性：controls、registerControl、addControl、removeControl 和另外 3 个。

27 }, this.passwordMatchValidator);

问题出在哪里？

Answer 1

只需更改输入的类型即可。

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

请正确阅读错误，写得很清楚。