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

有没有一种方法可以基于现有的数据模型创建一个反应式表单，并使用所有的验证魔法。在下面的示例中，作者将整个新对象传递给formbuilder，但我想要实现的是一种优雅的方式，告诉formbuilder需要什么字段或需要什么其他验证

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

@编辑

---

经过一些研究和@xrobert35的一点提示，如果我知道您只想在字段中添加验证器，我想尝试使用

我不能更准确地告诉你官方文件

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

}

ngOnInit（）：void{
this.heroForm=新表单组({
“名称”：新FormControl（this.hero.name[
需要验证器，
验证器。最小长度（4），
DennenNameValidator（/bob/i）//它们可能是实现您想要的功能的“多种”方式，但只需扩展您的实际解决方案即可：您的个人数据可能如下所示：

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

如果需要域基验证（用于可重用目的），可以使用验证

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

}

不，我不想指定每个FormControl，而是想从传递的类对象中获取它们。是的，如果我错了，请纠正我，但我认为这个解决方案促使我将FormControl放在模型本身中。我想避免这种情况。是的，我考虑过这一点，但将“验证器”与数据模型类混为一谈真的很优雅吗？就像我编写的一样，它是绝对不优雅，它不会把这个类放在我的“模型”中，但它可以是一种“分离”的优雅方式来声明表单。我没有时间搜索，但我想可能有人已经制作了一个“基于装饰的模型”。使用“@Email”@Required“@MaxLenght”等：）这将是一种优雅的方式
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);
    }

}