所以我在我的 Angular 表单上做了一个自定义验证器,它的工作方式如下:
摘自我的 component.ts 文件:
creteRoute(): FormGroup {
return this.fb.group({
'departure_airport_id': ['', Validators.required],
'departure_airport_code': ['', Validators.required],
'route_freequency': ['', [Validators.required, Validators.pattern("^[0-9]*$")]],
'arrival_airport_id': ['', Validators.required],
'arrival_airport_code': ['', Validators.required],
'target_price': ['', Validators.required],
'start_date': ['', Validators.required]
}
,{
validator: MustBeUnique('departure_airport_code','arrival_airport_code')
}
);
}
MustBeUnique 是从带有代码的单独文件中导入的:
export function MustBeUnique(controlName:string,uniqueControlName:string){
return (formGroup:FormGroup)=>{
const control=formGroup.controls[controlName];
const uniqueControl=formGroup.controls[uniqueControlName];
if (uniqueControl.errors && !uniqueControl.errors.mustBeUnique) {
console.log("Default error case")
return;
}
if(control.value === uniqueControl.value){
console.log("Arrival and Departure cannot be same location")
uniqueControl.setErrors({mustBeUnique:true})
}
else{
console.log("Values are unique")
uniqueControl.setErrors(null)
}
}
}
html代码摘录如下:
<div class="card card-body border-bottom" formArrayName="routes"
*ngFor="let item of newRequestForm.get('routes')['controls']; let i = index;">
<div [formGroupName]="i">
<input formControlName="arrival_airport_code" name="arrival_airport_id{{i}}"
[attr.list]="'arrivalAirport'+i" type="text" placeholder="Search Airport"
id="arrivalAirportText{{i}}" class="form-control" (keypress)="changeSearchFlag(true)"
(keyup)="onSearchAirport($event.target.value, i, 'arrive')" autocomplete="off">
<datalist class="form-control" id="arrivalAirport{{i}}" hidden>
<option *ngFor="let x of arrivalAirports" value="{{x?.code}}">{{x?.name}}</option>
</datalist>
<input type="hidden" formControlName="arrival_airport_id">
<div>
<small class="text-danger"
*ngIf="formSubmitted && item.controls.arrival_airport_id.hasError('required')">
This field is required.
</small>
<small class="text-danger"
*ngIf="formSubmitted && item.controls.arrival_airport_code.mustBeUnique">
Departure and Arrival cannot be at the same place
</small>
我在这里面临的问题是 MustBeUnique 文件中的逻辑在我使用 console.log() 跟踪它们时成功执行,但是我使用 setErrors 设置的错误消息没有显示在我的 HTML 上。
逻辑简单地说,用户为机场选择的到达和离开目的地不应该相同。所有其他验证器(内置)完美运行