[英]Argument of type '(fg: FormGroup) => { notmatched: boolean; }' is not assignable to parameter of type
I'm getting error like that (as u see in title).我遇到了这样的错误(如您在标题中所见)。 I have been working on this project for 2 days.
我已经在这个项目上工作了 2 天。
HTML Code: 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 Code: (problem line: this.passwordMatchValidator); 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 Code: 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 Code: 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 { }
Error: src/app/app.component.ts:27:11 - error TS2345: Argument of type '(fg: FormGroup) => { notmatched: boolean;错误:src/app/app.component.ts:27:11 - 错误 TS2345:参数类型 '(fg: FormGroup) => { notmatched: boolean; }' is not assignable to parameter of type 'ValidatorFn |
}' 不可分配给 'ValidatorFn | 类型的参数ValidatorFn[] |
验证器[] | AbstractControlOptions'.
抽象控制选项'。 Type '(fg: FormGroup) => { notmatched: boolean;
输入'(fg: FormGroup) => { notmatched: boolean; }' is not assignable to type 'ValidatorFn'.
}' 不可分配给类型 'ValidatorFn'。 Types of parameters 'fg' and 'control' are incompatible.
参数类型“fg”和“control”不兼容。 Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more.
类型“AbstractControl”缺少类型“FormGroup”中的以下属性:controls、registerControl、addControl、removeControl 等 3 个。
27 }, this.passwordMatchValidator); 27 }, 这个.passwordMatchValidator);
Where is the problem?问题出在哪里?
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.请正确阅读错误,写的很清楚。
Try disabling strictFunctionTypes
in the "tsconfig" file:尝试在“tsconfig”文件中禁用
strictFunctionTypes
:
"compilerOptions": {
"baseUrl": "src",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"strictFunctionTypes": false,
"strictNullChecks": false,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.