我想基于其他一些表单值对某些属性应用条件验证。我已经提到了一些答案Angular2:有条件的必需验证,但是这些并不能满足我的需求。因为我必须以大型企业应用程序的40多种形式(大约30个字段)实现条件验证。我不想在每个组件中编写相同的代码并更改FormControl名称。我不知道如何通过指令来实现。
如果年龄控制值v大于18,则必须输入许可证编号字段。
这是我的代码:
this.userCustomForm = this.angularFormBuilder.group({
age:['',Validators.required],
licenseNo:[''] // Here I want to apply conditional required validation.
});Run Code Online (Sandbox Code Playgroud)
在我的应用程序中,有些情况下我想基于嵌套的FormGroup或FormArray值设置条件验证。
请指导我,我该如何实现。
我正在根据建议的角度角度形式验证错误示例方法显示反应形式错误消息。
在页面上显示错误的html代码:
<div [formGroup]="myForm">
<div>
<input type="text" formControlName="firstName"/>
<div *ngIf="myForm.controls.firstName.invalid"
class="alert alert-danger">
<div *ngIf="myForm.controls.firstName.errors.required">
This Field is Required.
</div>
<div *ngIf="myForm.controls.firstName.errors.maxlength">
your can enter only 50 characters
</div>
</div>
</div>
<div>
<input type="text" formControlName="lastName"/>
<div *ngIf="myForm.controls.lastName.invalid"
class="alert alert-danger">
<div *ngIf="myForm.controls.lastName.errors.required">
This Field is Required.
</div>
<div *ngIf="myForm.controls.lastName.errors.maxlength">
your can enter only 50 characters
</div>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
仅供参考以下我的组件代码:
this.myForm = this.formBuilder.group({
firstName:['',[Validators.required,Validators.maxLength(50)]],
lastName:['',[Validators.required,Validators.maxLength(50)]]
})
Run Code Online (Sandbox Code Playgroud)
如果看到上面的代码,则对我的firstName和lastName字段应用了两个验证。
为了显示错误消息,我编写了多个* ngIf条件来显示错误消息。
有什么最好的方法来显示特定控件的验证消息而无需编写多个* ngIf条件?,因为我一次又一次地编写相同的代码,而使用不同的控件名称和验证者名称来显示错误消息。