javascript - 在类中封装验证方法(Angular)

Question

嘿，我正在努力让我的应用程序代码看起来更好、更有条理。现在我在表单的组件内进行了验证。如何创建一个新类并在我的表单组中使用此验证方法？

我将发布我的代码:

export class AddMovieComponent implements OnInit {


  movieForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private dataService: DataService,
  ) {


  }

  ngOnInit() {


    this.movieForm = this.fb.group({
      title: ['', [Validators.required, this.titleValidator.bind(this)]],
     ...
  }

  titleValidator(control: AbstractControl) { --> I want this method in a CustomValidators class
    if (control && (control.value !== null || control.value !== undefined)) {
      for (let i = 0; i < this.dataService.getTitles().length; i++) {
        if (control.value == this.dataService.getTitles()[i]) {
          return {
            isError: true
          };
        }
      }
      return null;

    }
  }

我尝试创建一个新类并仅添加验证方法，但结果就是出错了，整个语法都变坏了。我希望有人能在这里给我指导。

非常感谢!

Answer 1

只需创建一个新服务并在服务中添加方法即可。然后将服务注入(inject)到您想要使用该方法的位置，如下所示:

使用该服务的组件:

constructor(private myService: MyService) {
  // you might need this next line in your case
  myService.titleValidator = myService.titleValidator.bind(this)
}

ngOnInit() {
  this.movieForm = this.fb.group({
    title: ['', [Validators.required, this.myService.titleValidator()]],
   ...
}

服务如下所示:

@Injectable({                  
  providedIn: 'root' // this line means you don't need to add it to a providers array and it will be loaded on demand and is accessible at the root level, it creates a single instance of the service that is accessible anywhere
})                             
export class MyService {                           
  constructor() { }           
  titleValidator(control: AbstractControl) {
    // blah blah
  }       
}                              

您也可以只创建一个类，然后将其导出到声明它的文件中(导出类 MyClass)，然后将其导入到使用它的组件中。但服务在 Angular 世界中更为常见。