首页 文章

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

提问于
浏览 次
3

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

3 回答

  • 1

    它们可以是“很多”方式来做你想做的事情，但只需扩展你的实际解决方案：你的个人数据可能如下所示：

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

    如果我理解你只想在你的领域添加验证器 .

    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

    回复于
  • 1

    @Hagalaz

    如果您将使用“@ rxweb / reactive-form-validators”，此包将根据应用的装饰器（alpha，required等）自动设置属性上的验证器，并且对象映射表示您在创建FormGroup时传递的任何类对象 .

    请参阅以下代码示例 .

    步骤1

    import { alpha, }
from "@rxweb/reactive-form-validators"
export class Employee
{
    private _fullName:string;
   @alpha({ message: "Please enter only alphabets"})
    get fullName()
    {
        return this._fullName;
    }
    set fullName(property: string)
    {
        this._fullName = property;
    }
}

    以上是Employee类，fullName属性值应仅以字母为单位 . 每当用户在此时从用户界面输入数据时，将调用set accessor，如果该值不是字母，则表单将变为无效 .

    第2步

    import { RxFormBuilder } from "@rxweb/reactive-form-validators";
export class EmployeeEditComponent implements OnInit
{
    employeeFormGroup: FormGroup
    constructor(
        private formBuilder: RxFormBuilder
    ) { }
    ngOnInit()
    {
        var employee = new Employee()
        this.employeeFormGroup = this.formBuilder.formGroup(employee);
    }
}

    以上是创建FormGroup对象并根据角度标准在HTML上编写代码 .

    请参阅stackblitz上的完整示例：rxweb reactive form validators property accessor

    如果这不能解决您的需求，请随时在rxweb github上创建拉取请求/问题 .

    回复于

相关问题