Question

有没有一种方法可以根据现有的数据模型创建具有所有验证功能的反应形式。在下面的示例中，作者将整个新对象传递到formbuilder中，但是我想要实现的是一种优雅的方式来告诉formbuilder哪些字段是必需字段或需要其他验证。

https://malcoded.com/posts/angular-fundamentals-reactive-forms

export class PersonalData {
  email: string = '';
  mobile: string = '';
  country: string = '';
}
...
createFormGroupWithBuilderAndModel(formBuilder: FormBuilder) {
    return formBuilder.group({
      personalData: formBuilder.group(new PersonalData()),
      requestType: '',
      text: ''
    });
  }

我只想跳过为模型中的每个字段分配FormControl的过程。

@EDIT

经过一些研究和@ xrobert35的一点提示，我想尝试并使用https://www.npmjs.com/package/@rxweb/reactive-form-validators

Answer 1

它们可能是“很多”做您想做的事情的方法，但是通过扩展您的实际解决方案：您的个人数据可能看起来像：

export class PersonalData {
  email: string = ['', Validators.required];
  mobile: string = ['', Validators.required, Validators.maxLength(10)];
  country: string = '';
}

Answer 2

据我了解，您只想在字段中添加验证器。

https://angular.io/guide/form-validation

我不能更精确地向您提供正式文档。

ngOnInit(): void {
  this.heroForm = new FormGroup({
    'name': new FormControl(this.hero.name, [
      Validators.required,
      Validators.minLength(4),
      forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
    ]),
    'alterEgo': new FormControl(this.hero.alterEgo),
    'power': new FormControl(this.hero.power, Validators.required)
  });

}

在此示例中，必填字段名称和功率，当然语法可以不同，但流程相同。

对您有帮助吗？

@EDIT 您的用例有相同的帖子： https://stackoverflow.com/a/47576916/7133262

Answer 3

如果您需要基于域的验证（出于可重用的目的），则可以使用rxweb验证。

{{ page.page_description | markdownify }}

基于带有验证的模型的角反应形式

3 个答案: