Angular 逻辑上的自定义验证器已成功实施，但未在我的网页 UI /HTML 上显示错误消息

Question

所以我在我的 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>

我在这里面临的问题是，当我使用 console.log() 跟踪它们时，MustBeUnique 文件中的逻辑已成功执行，但我使用 setErrors 设置的错误消息没有显示在我的 HTML.

逻辑简单地说，用户为机场选择的到达目的地和出发目的地不应该相同。所有其他验证器（内置）工作完美

Answer 1

item.controls.arrival_airport_code.mustBeUnique您正在访问控件本身的错误。

相反，您的错误将在 FormControl 的 errors 属性上可用。

更改为：item.controls.arrival_airport_code.errors.mustBeUnique

Angular 逻辑上的自定义验证器已成功实施，但未在我的网页 UI /HTML 上显示错误消息

Custom Validator on Angular logic gets implemented successfully but does not show the error message on my web page UI /HTML

typescript

angular

angular-custom-validators