Question

很抱歉，我正在使用angular 6应用程序，并且正在添加自定义验证器，该验证器是否检查数据库文件是否存在，但是我只想在输入模糊时调用该验证器，请问有什么可以帮助的吗？

这是我的示例html代码：

 <mat-form-field class="ais_form_field_tbox" >
                        <input class="ais_tbox" matInput name="fileType" #fileType="ngModel" [(ngModel)]="fileTypeCreation.fileType" appFileTypeExists [(allFileTypes)]="filetypelist">
                    </mat-form-field>
                  <mat-error>
                    <div *ngIf="!fileType.valid && fileType.touched">
                      FileType is required!
                    </div>
                   <div *ngIf="fileType.errors?.fileExists && (fileType.touched || fileType.dirty)" class="cross-validation-error-message alert alert-danger">
                      File Already Exists.
                    </div>
                  </mat-error>

这是我使用以下指令创建并声明的指令：

@Directive({
     selector: '[appFileTypeExists][ngModel]',
      providers: [
          { provide: NG_VALIDATORS, useExisting: FileTypeExistsDirective, 
          multi: true }
      ]
     })
      export class FileTypeExistsDirective implements  Validators {
        @Input() allFileTypes: any;
        constructor() {}

       validate(c: AbstractControl): { fileExists: boolean } {
      if (this.allFileTypes.findIndex(x => x.fileType === c.value)){
        c.setErrors({fileExists: true});
       } else {
         return null;
       }
      }

    }

我的问题是我的指令validate函数仅在对话框上被调用，但希望它在输入模糊事件时触发，我必须做些什么更改。是的，我在对话框中有表格。

Answer 1

我不熟悉您验证输入字段的方法，我将分享我用于验证字段模糊的方法。

我最终通过反应形式使用FormControl将自定义验证程序附加到字段上。

https://angular.io/guide/form-validation#custom-validators

html

<form name="testFormGroup ">    
    <input formControlName="testCustomValidator">

    <div *ngIf="testFormGroup.get('testCustomValidator').hasError('errorInMath')">
    1 + 1 does not equal 3. </div>
 </form>

组件

var testFormGroup = new FormGroup({
  testCustomValidator: new FormControl('', {validators: [Validators.required, 
  this.testCustomValidator.bind(this)]
  })
})

自定义验证器

testCustomValidator(AC: AbstractControl){
  if (1+1!=3){
    return {errorInMath: true};
  }else{
    return null;
   }
  }

请注意：，不建议将ngModel与反应形式一起使用，如果您选择探索此解决方案，则需要使用formGroup设置字段默认值并使用testFormGroup ['testCustomValidator'] .Value，将字段值传递给组件。

角度模板驱动的自定义验证器

1 个答案: