我正在嘗試在 Angular 中創建一個聯系表單，但是我的 contact-form.ts 中出現了一個我根本無法理解的錯誤。這是我的代碼：
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, Validators, FormGroup} from '@angular/forms';
@Component({
selector: 'app-contact-form',
templateUrl: './contact-form.component.html',
styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent implements OnInit {
FormData: FormGroup | undefined;
constructor(private builder: FormBuilder) { }
ngOnInit(): void {
this.FormData = this.builder.group ({
Fullname: new FormControl('', [Validators.required]),
Email: new FormControl('', [Validators.compose([Validators.required, Validators.email])]),
Comment: new FormControl ('', [Validators.required])
})
}
}
給我帶來麻煩的線路如下：
Email: new FormControl('', [Validators.compose([Validators.required, Validators.email])])
我被告知
輸入 'ValidatorFn | null' 不可分配給型別 'ValidatorFn'。
型別 'null' 不可分配給型別 'ValidatorFn'.ts(2322)
謝謝！
uj5u.com熱心網友回復：
Validators.compose()將回傳ValidatorFnor的值null。
靜態組合（驗證器：空）：空
當您strict: true在 tsconfig.json 中啟用嚴格型別檢查 ( ) 時遇到此錯誤。
會說您不需要使用Validators.compose()，而是使用陣列 ( ValidatorFn[])進行多次驗證檢查，如下所示：
this.FormData = this.builder.group ({
Email: new FormControl('', [Validators.required, Validators.email]),
...
})
StackBlitz 上的示例演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/382648.html