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

只需创建一个新服务并将该方法添加到服务中即可。然后将服务注入到您想使用的方法中，如下所示：

使用该服务的组件：

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世界中更为普遍。

类中的包验证方法（角度）

1 个答案: