我在 Angular-11 中有这个代码：
这是代码的注册打字稿组件。
export class SignupComponent implements OnInit {
form!: FormGroup;
submitted = false;
constructor(
private fb: FormBuilder,
) {}
// tslint:disable-next-line:typedef
ngOnInit(): void {
this.form = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
confirm_password: ['', Validators.required]
})
}
// tslint:disable-next-line:typedef
get f() {
return this.form.controls;
}
// tslint:disable-next-line:typedef
onSubmit() {
this.submitted = true;
const formData = this.form.getRawValue();
const data = {
name: formData.name,
email: formData.email,
password: formData.password,
confirm_password: formData.confirm_password
};
// stop here if form is invalid
if (this.form.invalid) {
return;
}
const header = {
'Content-Type': 'application/json'
};
return this.api.post('auth/signup', data, header).subscribe(
(result: any) => {
this.router.navigate(['/auth']);
},
);
}
}然后signup.html：
<div class="form-group">
<div class="input-group mb-3">
<input type="email" name="email" class="form-control" placeholder="[email protected]" formControlName="email" [ngClass]="{ 'is-invalid': submitted && f.email.errors }">
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-envelope"></i></div>
</div>
<div *ngIf="f.email.errors.required">Email is required</div>
<div *ngIf="f.email.errors.email">Email must be a valid email address: [email protected]</div>
</div>
</div>当我尝试为该项目提供服务时，出现此错误：
Error: src/app/signup/signup.component.html:59:48 - error TS2531: Object is possibly 'null'.
59 <div *ngIf="f.email.errors.required">Email is required</div>
~~~~~~~~
src/app/signup/signup.component.ts:13:16
13 templateUrl: './signup.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component SignupComponent.
Error: src/app//signup/signup.component.html:60:48 - error TS2531: Object is possibly 'null'.
60 <div *ngIf="f.email.errors.email">Email must be a valid email address: [email protected]</div>
除了电子邮件之外，所有其他验证都有效。我已经有一段时间了。我试图弄清楚，但仍然没有解决方案。
我该怎么做才能解决这个问题？
谢谢
您可以使用hasError控制方法而不是error.errorName; 它正在返回布尔值；true当错误存在时
control.hasError('errorName')
使用示例
f.email.hasError('required')
或者
第二种方法是在键名前加一个问号
像这样
f.email.errors?.required
这相当于
if(f.email.errors !== null || f.email.errors !== undefined) {
f.email.errors.required
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句