基于具有验证的模型的角度反应形式答案

【问题标题】：Angular reactive form based on model with validation基于具有验证的模型的角度反应形式
【发布时间】：2019-02-25 19:26:04
【问题描述】：

有没有一种方法可以基于具有所有验证魔法的现有数据模型创建反应式表单。在下面的示例中，作者将整个新对象传递给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

【问题讨论】：

标签： javascript angular angular-reactive-forms

【解决方案1】：

如果您需要域基础验证（出于可重用目的），您可以使用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);
    }

}

【讨论】：

【解决方案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

【讨论】：

不，我不想指定每个 FormControl，而是从传递的类对象中获取它们。
是的，如果我错了，请纠正我，但我认为这个解决方案促使我将 FormControls 放入模型本身。我想避免这种情况。

【解决方案3】：

它们可能是做你想做的事情的“多种”方式，但只需扩展你的实际解决方案：你的个人数据可能看起来像：

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

【讨论】：

是的，我想过这个问题，但是将“验证器”与数据模型类混合起来真的很优雅吗？
就像我写的那样，它绝对不优雅，它不会把这个类放在我的“模型”中，但它可以是一种“分离”的优雅方式来声明一个表单。我没有时间搜索，但我想有人可能已经制作了“基于装饰器的模型”。使用 '@Email' '@Required' '@MaxLenght' 等 :) 这将是一种优雅的方式