angular - 错误 TS2345 : Argument of type 'NgForm' is not assignable to parameter of type '{ value: User; valid: boolean; }'

Question

我没有找到这个错误的解决方案:

error TS2345: Argument of type 'NgForm' is not assignable to parameter of type '{ 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: 'abianchi@gmail.com'

      },
      {
        firstname: 'Marco',
        lastname: 'Verdi',
        birthdate: new Date('1981/12/22'),
        email: 'mverdi@gmail.com'

      },
      {
        firstname: 'Luca',
        lastname: 'Rossi',
        birthdate: new Date('1978/10/01'),
        email: 'lrossi@gmail.com'

      }

    ]
  }

  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: 'abianchi@gmail.com',
        hideShowDetails:true

      },
      {
        firstname: 'Marco',
        lastname: 'Verdi',
        birthdate: new Date('1981/12/22'),
        email: 'mverdi@gmail.com',
        hideShowDetails:false

      },
      {
        firstname: 'Luca',
        lastname: 'Rossi',
        birthdate: new Date('1978/10/01'),
        email: 'lrossi@gmail.com',
        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:'a.ramano@gmail.com'
    };

    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');
  }

记得从'@angular/forms'导入{NgForm}