需要根据组件中的if条件在错误中显示错误消息

Question

我想根据组件中的if条件以mat错误显示错误消息。

export class EditMaterialComponent implements OnInit {

  public quantityRemaining:any;
  public editMaterialForm = new FormGroup({
    count: new FormControl(''),
    suppliedTo: new FormControl('')
  })
  public errormatcher = new MyErrorStateMatcher();
  constructor(private dialogRef: MatDialogRef<EditMaterialComponent>,@Inject(MAT_DIALOG_DATA) public dialogData: any,private inventoryMngService:InventoryMngService) { }

  ngOnInit() {
    console.log(this.dialogData);

  }


  /** CLOSE mat dialog **/
  close() {
    this.dialogRef.close(null);
  }
  updateQuantity(){

    this.dialogData.count = this.dialogData.count - this.editMaterialForm.value.count;
    this.dialogData.comment = this.editMaterialForm.value.suppliedTo;
    if(this.editMaterialForm.valid){
     this.inventoryMngService.updateICase(this.dialogData).subscribe(res=>{
       console.log(res);
       this.close();
      },err=>{
        console.log(err);
      })
    }

}
}

在updateQuantity()中，如果this.editMaterialForm.value.count > this.dialogData.count需要在<mat-error></mat-error>中显示错误。谁能帮我解决这个问题？

Answer 1

您可以通过编程设置错误。像这样的东西

单位：ts

FormControl.markAsTouched()
FormControl.setErrors({error: true}, {emitEvent: false});

和在模板中

<mat-error *ngIf="FormControl.hasError('error')">error message</mat-error>

Answer 2

您可以使用这样的自定义验证器：

export const validateCondition = (condition: (control: AbstractControl) => boolean, errorString: string): ValidatorFn => 
  (control: AbstractControl): ValidatorErrors =>
  (condition(control) ? null : { [errorString]: { value: control.value } });

您可以这样使用它：

editMaterialForm = new FormGroup({
  count: new FormControl('', [validateCondition(control => control.value > this.dialogData.count, 'myCustomError')]),
  suppliedTo: new FormControl('')
})

然后在您的HTML中：

<mat-error *ngIf="FormControl.hasError('myCustomError')">message</mat-error>