Angular 基于经过验证的模型的反应形式

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

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

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)
  });

}

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

对你有帮助吗？

@编辑 您的用例有相同的 post ：

Answer 2

它们可能是 "many" 做您想做的事的方式，但只需扩展您的实际解决方案：您的个人数据将如下所示：

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

Answer 3

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

export class PersonalData {
    @required()
    email: string;

    @required()
    mobile: string;    

    @greaterThan({ fieldName: 'number2' })
    number1: number;
    
    @prop()
    number2: number;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    formGroup: FormGroup;
    constructor( private validation: RxFormBuilder) {
    }

    ngOnInit() {      
        let person: PersonalData = new PersonalData();
        this.formGroup = this.validation.formGroup(person);
    }

}

Angular 基于经过验证的模型的反应形式

Angular reactive form based on model with validation

javascript

angular

angular-reactive-forms