'Partial型別的Angular14FormGroup引數......不兼容

我正在嘗試使用 Angular 14 制作登錄表單，但出現以下錯誤訊息： Argument of type 'Partial<{ email: ((control: AbstractControl<any, any>) => ValidationErrors | null)[] | null; password: ValidatorFn[] | null; }>' is not assignable to parameter of type '{ email: String; password: String; }'. Types of property 'email' are incompatible. Type '((control: AbstractControl<any, any>) => ValidationErrors | null)[] | null | undefined' is not assignable to type 'String'. Type 'undefined' is not assignable to type 'String'.

經過一番搜索，我可以理解這是因為我們可以禁用 formControl，這將使該控制元件不在值中。但是經過一些嘗試，我沒有得到它來更新我的代碼并繼續沒有這個錯誤。

登錄組件.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from 
'@angular/forms';
import { Router } from '@angular/router';
import { AccountService } from 
 'src/app/services/account.service';
import { AuthService } from 
'src/app/services/auth.service';
import { TokenService } from 
'src/app/services/token.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
 })
export class LoginComponent implements OnInit {

loginForm = new FormGroup({
email: new FormControl([Validators.required, 
Validators.email],),
password: new FormControl([ Validators.required, 
Validators.minLength(6), Validators.maxLength(6)])

})

constructor(private authService: AuthService,
        private tokenService: TokenService,
        private router: Router,
        private accountService: AccountService
         ) { }

ngOnInit(): void {
}

login() {





 this.authService.login(this.loginForm.value).subscribe((res: any) => {
  this.handleResponse(res)
 })
 }

handleResponse(res: Object){
this.tokenService.handle(res)
this.accountService.changestatus(true)
this.router.navigateByUrl("/posts")
}

 }

我的 auth.service.js

import { Injectable } from '@angular/core';
import { LoginComponent } from '../components/login/login.component';
import { HttpClient} from "@angular/common/http"
import { LocalizedString } from '@angular/compiler';

@Injectable({
 providedIn: 'root'
})
export class AuthService {

  authUser: any = {
  token: null,
  user: {
  id: null,
  name: null,
  email: null
 }
  };
  constructor(
  private http: HttpClient
 ) {}

  login(data: { email: String, password: String }){
  return this.http.post("http://localhost:3000/api/register", data);
 }

sign(data: { name : String, email: String, password: String, age: Number, nourriture: 
 String }){
  return this.http.post("http://localhost:3000/api/login", data);
}


}

uj5u.com熱心網友回復：

打字稿問題

• String,Number是 JavaScript 建構式。例如const x = new Number(“5”)。請參閱https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
• string,number是字串和數字的打字稿型別。

不要將建構式用作型別。

所以，例如，

login(data: { email: String, password: String }){}

應該

login(data: { email: string, password: string }){}

使用介面會讓你的代碼看起來更干凈。

表單控制元件

FormControl 建構式被多載。我建議使用以下簽名，

loginForm = new FormGroup({
    email: new FormControl("", 
        {
            nonNullable: true,
            validators: [
                Validators.required, 
                Validators.email
            ]
        }
    ),
    password: new FormControl("",
        {
            nonNullable: true,
            validators: [
                Validators.required,
                Validators.minLength(6),
                Validators.maxLength(6)
            ]
        }
    );

注意我不記得簽名是什么。我讓 VS Code 通過查看當我將滑鼠懸停在 FormControl 上時彈出的型別來幫助我。作為參考，建構式簽名在這里（單擊顯示更多）https://angular.io/api/forms/FormControl#constructor

此外，我建議您輸入您的表格。這將使您的 IDE 為您作業。請參閱https://angular.io/guide/typed-forms#optional-controls-and-dynamic-groups

部分型別

如果您知道任何表單控制元件都不會被禁用，您可以使用loginForm.getRawValue(). 無論禁用狀態如何，這都會獲取所有值。

標籤：有角度的表单组角14

上一篇：檢查所選日期的可用時間段

下一篇：當我彈出空佇列或推送全佇列時如何讓執行緒等待