错误 TS2345：类型 'NgForm' 的参数不可分配给类型 '{ value: User; valid: boolean; }' 的参数

Question

我找不到这个错误的解决方案：

错误TS2345:类型为"NgForm"的参数不可分配给类型为"｛value:User；valid:boolean；｝"的参数。

行

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">

在component.html 中

我分享我的代码来描述我的问题：

这是component.html

<p>user-component works!</p>
<h3>Hello {{firstname}}{{lastname}}</h3>
<div class="card" style="width: 36rem">
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
<div class="form-group">
<label> First Name</label>
<input (keydown)="fireEvent($event)" type="email"
class="form-control"
[(ngModel)]="user.firstname"
[ngClass]="{'is-invalid': newUserFistName.errors && newUserFistName.touched}"
#newUserFistName = "ngModel"
name="firstname"
required
minlength="2">
<div class="invalid-feedback" [hidden]="!newUserFistName.errors?.required">
Firstname is required
</div>
<div class="invalid-feedback" [hidden]="!newUserFistName.errors?.minlength">
Please insert valid firstname (>=2 char)
</div>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text"
class="form-control"
[(ngModel)]="user.lastname"
#newUserLastName = "ngModel"
[ngClass]="{'is-invalid': newUserLastName.errors && newUserLastName.touched}"
name="lastname"
required>
<div class="invalid-feedback">
Please insert valid lastname
</div>
</div>
<div class="form-group">
<label>Birthdate</label>
<input type="date"
class="form-control"
[(ngModel)]="user.birthdate"
name="birthdate"
>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control"
[(ngModel)]="user.email"
#newUserEmail = "ngModel"
[ngClass]="{'is-invalid': newUserEmail.errors && newUserEmail.touched}"
name="email"
pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"
>
<div class="invalid-feedback">
Please insert valid email
</div>
</div>
<div class="form-group">
<label>Street</label>
<input type="text"
class="form-control"
name="street"
>
</div>
<div class="form-group">
<label>City</label>
<input type="text"
class="form-control"
name="city"
>
</div>

<button type="submit" [disabled]="!userForm.form.valid" class="btn btn-primary">Submit</button>
</form>
</div>

<div class="card" style="width: 18rem;" *ngFor="let item of userarray; let myindex = index">
<div class="card-body">
<ul>
<li>{{myindex +1 }}.{{item.firstname| argumentspipe:"Mr/Ms"}} {{item.lastname | reversestr}}</li>
<button (click)="hideShow(item)" type="button" class="btn btn-info">Hide/Show</button>
<li *ngIf="item.hideShowDetails">Birthdate: {{item.birthdate | date:'short'}}</li>
<li *ngIf="item.hideShowDetails">Email:{{item.email}}</li>
<li *ngIf="item.hideShowDetails &&
item.address &&
item.address.street &&
item.address.city">Address:{{item.address.street}}, {{item.address.city}}</li>
</ul>
</div>
</div>
&lt;!&ndash;<button (click)="addNewUSer($event)" [disabled]="!enableAdd" type="button" class="btn btn-secondary" [ngClass]="currentStyle">Add new User</button>&ndash;&gt;

这是组件.ts

import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {User} from "../../models/user";
import {any} from "codelyzer/util/function";
@Component({
selector: 'app-user-component',
templateUrl: './user-component.component.html',
styleUrls: ['./user-component.component.scss']
})

export class UserComponentComponent implements OnInit, AfterViewInit {
@ViewChild('userForm') form: any;
firstname: string;
lastname: string;
user: User;
userarray: User[];
detailsvisible: boolean;
enableAdd: boolean;
currentStyle = {};

constructor() {
console.log('I am in constructor');
this.enableAdd = true;
this.detailsvisible = true;
this.firstname = 'Mario';
this.lastname = 'Rossi';
this.user = {
firstname: '',
lastname: '',
email: '',
address: {
street: '',
city:''
}
};
//this.user = {} as User;
//this.user.address = {};
this.userarray = [
{
firstname: 'Anna',
lastname: 'Bianchi',
birthdate: new Date('1981/05/21'),
email: '[e-mail]'
},
{
firstname: 'Marco',
lastname: 'Verdi',
birthdate: new Date('1981/12/22'),
email: '[e-mail]'
},
{
firstname: 'Luca',
lastname: 'Rossi',
birthdate: new Date('1978/10/01'),
email: '[e-mail]'
}
]
}
ngOnInit(): void {
console.log('I am ngOnInit');
this.currentStyle = {
'btn-success': this.enableAdd,
'big-text': this.enableAdd
};
this.enableAdd = true;
this.detailsvisible = true;
this.firstname = 'Mario';
this.lastname = 'Rossi';
this.user = {
firstname: '',
lastname: '',
email: '',
address: {
street: '',
city:''
}
};
//this.user = {} as User;
//this.user.address = {};
this.userarray = [
{
firstname: 'Anna',
lastname: 'Bianchi',
birthdate: new Date('1981/05/21'),
email: '[e-mail]',
hideShowDetails:true
},
{
firstname: 'Marco',
lastname: 'Verdi',
birthdate: new Date('1981/12/22'),
email: '[e-mail]',
hideShowDetails:false
},
{
firstname: 'Luca',
lastname: 'Rossi',
birthdate: new Date('1978/10/01'),
email: '[e-mail]',
hideShowDetails:true
}
]
}
ngAfterViewInit() {
console.log('I am in ngAfterViewInit');
}

fireEvent(e: any) {
console.log(e.type);
}
addNewUSer(e: any){
let tempUser: User;
tempUser = {
firstname:'Adriano',
lastname:'Ramano',
birthdate: new Date("1993/12/11"),
email:'[e-mail]'
};
this.userarray.push(tempUser);
}
hideShow(item: User){
item.hideShowDetails = !item.hideShowDetails;
}
addNewUserForm(e: any){
//this.userarray.push(this.user); //Aggiunge un elemento sotto all'array
this.userarray.unshift(this.user);//Aggiunge un elemento sopra all'array
}
onSubmit({value, valid}: {value: User, valid: boolean}) {
console.log('I am on Submit method');
}

}

这是app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UserComponentComponent } from './components/user-component/user-component.component';
import { ReversestrPipe } from './pipes/reversestr.pipe';
import { ArgumentspipePipe } from './pipes/argumentspipe.pipe';
import {FormsModule} from "@angular/forms";
@NgModule({
declarations: [
AppComponent,
UserComponentComponent,
ReversestrPipe,
ArgumentspipePipe
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您的onSubmit函数中的类型不匹配

低于的更改

onSubmit({value, valid}: {value: User, valid: boolean}) {
console.log('I am on Submit method');
}

至

onSubmit({value, valid}: NgForm) {
console.log('I am on Submit method');
}

记住import {NgForm} from '@angular/forms'