为每个自定义验证创建 <mat-error> angular

Question

我正在验证一个输入，为此我创建了 2 个自定义验证器。我无法得到的是能够将每个自定义验证器与特定的垫错误相关联。

我在下面留下了我的代码，非常感谢任何帮助

自定义验证器：

    ValidateNumbLength(control: AbstractControl) : ValidationErrors | null  {
    
        let numb = control.value;
        let lengthNumb!: string;
    
        if (numb != null){
          lengthNumb = numb.toString();
        }else {
          return  { 'numb invalid!': true };
        }
    
        if (lengthNumb.length == 1 || lengthNumb.length == 3 ) {
            return null;
        }if (lengthNumb.length == null){
          return  { 'numb invalid!': true };
        }
        else {
          return  { 'numb invalid!': true };
        }
      }
    
      ValidateNnmbValue(control: AbstractControl) : ValidationErrors | null  {
    
        let numb = control.value;
        let lengthNumb!: string;
    
        if (numb != null){
          lengthNumb = numb.toString();
        }else {
          return  { 'numb invalid!': true };
        }
    
        
        if (numb == 0.5 || numb == 1.0 || numb == 1.5 ){
          return null;
        } if (lengthNumb.length == null){
        return  { 'numb invalid!': true };
        }
        else {
          return  { 'numb invalid!': true };
        }
      }

表单控件：

    this.nominalSizeGroup = this._formBuilder.group({
          
          numb: ['', [ Validators.compose([Validators.required, Validators.min(0)]), this.ValidateNumbLength, this.ValidateNnmbValue]],
        });

    <mat-error *ngIf="(nominalSizeGroup.get('numb')?.touched || nominalSizeGroup.get('numb')?.dirty) && nominalSizeGroup.get('numb')?.invalid && nominalSizeGroup.get('numb')?.hasError('ValidateCoolingTomsLength')">
          Cooling tons must be 1 or 3 characters.
    </mat-error>
    <mat-error *ngIf="nominalSizeGroup.get('numb')?.invalid">
          You have entered an incorrect value.
    </mat-error>

Answer 1

您 return 与验证器的密钥是输入将出现的错误的名称。在您的情况下，对于所有情况，它们的键都是 'numb invalid!' 。因此，要检查这些错误，它是：

nominalSizeGroup.get('numb')?.hasError('numb invalid!')

如果您想要针对不同的情况使用不同的消息，您需要重命名错误：

ValidateNumbLength(control: AbstractControl) : ValidationErrors | null  {
        let numb = control.value;
        if (!numb) return { numbIsFalsey : true };
        const lengthNumb = numb.toString();
        if (lengthNumb.length === 1 || lengthNumb.length === 3 ) {
            return null;
        else {
          return  { wrongLength: true };
        }
      }

<mat-error *ngIf="nominalSizeGroup.get('numb')?.hasError('numbIsFalsey')">
  Please enter a value.
</mat-error>
<mat-error *ngIf="nominalSizeGroup.get('numb')?.hasError('wrongLength')">
  Cooling tons must be 1 or 3 characters.
</mat-error>

附带说明： 你永远不应该使用 == 来表示相等，它只存在于遗留代码中，=== 是正确的方法。

为每个自定义验证创建 <mat-error> angular

create <mat-error> for each custom validation angular

validation

angular

angular-reactive-forms