角度 - 表单生成器 - 表单控件无效，未更新/ ngIf 错误

Question

我希望在验证器无效时弹出错误划分，但它没有。

错误最有可能出现在以下行中：

<div class = "danger" *ngIf="firstName?.invalid 
&& (firstName?.dirty || firstName?.touched)">

预期行为：当表单无效时，输入应显示错误div

实际行为：没有显示div，但是验证确实可以正确用于整个表单。

表单生成器：

export class DetailsComponent implements OnInit {
detailsForm;
constructor(
private formBuilder: FormBuilder,
) { 
this.detailsForm = this.formBuilder.group({
firstName: ['',[Validators.required,
Validators.pattern("[a-zA-Z]+")]],
lastName: ['',[Validators.required,
Validators.pattern("[a-zA-Zs]+")]],
email: ['',[Validators.required,
Validators.email]],
region: ['',[Validators.required,
Validators.pattern("[a-zA-Zs]+")]],
yearOfBirth: ['',[Validators.required, 
Validators.pattern("^(19[0-9]{2})|(2[01][0-9]{2})$")]],
}, { updateOn: "blur" })
}
}

模板：注意省略了其他输入以减少文本量

<div class="center-container">
<form [formGroup]="detailsForm" (ngSubmit)="onSubmit()">
<div>
<label for="firstName">First Name</label>
<input id="firstName" type="text" formControlName="firstName">
<div class = "danger" *ngIf="firstName?.invalid && (firstName?.dirty || firstName?.touched)"> 
ERROR
</div>
</div>
</form>   
</div>

Answer 1

尝试像这样将控件从表单对象中取出：

<div class="center-container">
<form [formGroup]="detailsForm" (ngSubmit)="onSubmit()">
<div>
<label for="firstName">First Name</label>
<input id="firstName" type="text" formControlName="firstName">
<div class = "danger" *ngIf="firstName?.invalid && (firstName?.dirty || firstName?.touched)"> 
ERROR
</div>
</div>
</form>   
</div>

在您的组件中.ts

get firstName() {
return detailsForm.get('firstName');
}

文档：https://angular.io/guide/form-validation#built-in-validators

Answer 2

<form [formGroup]="detailsForm" (ngSubmit)="onSubmit()">
<input id="firstName" type="text" formControlName="firstName">
<div 
class = "danger"
*ngIf="detailsForm.get('firstName')?.invalid && 
(detailsForm.get('firstName)?.dirty || 
detailsForm.get('firstName')?.touched)"
> 
ERROR
</div>
</form>

或

<form [formGroup]="detailsForm" (ngSubmit)="onSubmit()">
<input id="firstName" type="text" formControlName="firstName">
<div 
class = "danger"
*ngIf="detailsForm.controls.firstName?.invalid && 
(detailsForm.controls.firstName?.dirty || 
detailsForm.controls.firstName?.touched)"
> 
ERROR
</div>
</form>

Answer 3

尝试如下：

<form [formGroup]="detailsForm" (ngSubmit)="onSubmit()">
<div>
<label for="firstName">First Name</label>
<input id="firstName" type="text" formControlName="firstName">
<div class = "danger" *ngIf="detailsForm.get('firstName')?.invalid && (detailsForm.get('firstName')?.dirty || detailsForm.get('firstName')?.touched)"> 
ERROR
</div>
</div>
</form>