时间戳

首页 > 解决方案 > 如何在 2 个 Angular 组件之间共享表单验证

angular - 如何在 2 个 Angular 组件之间共享表单验证

问题描述

我有带有用于添加/编辑功能的表单的组件。Add 和 Edit 的表单字段是相同的，因此我想在每个字段中重复使用我的表单验证。我在导出的 Add 类中有以下验证设置：

export class AddCarriersComponent implements OnInit {

  addCarrierForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  createForm() {
    this.addCarrierForm = this.fb.group({
      carrierName:                   ['', Validators.required],
      contactNumber:                 ['', Validators.required],
      addressLineOne:                ['', Validators.required],
      addressLineTwo:                [''],
      city:                          ['', Validators.required],
      state:                         ['', Validators.required],
      county:                        ['', Validators.required],
      zip:                           ['', Validators.required],
      contactName:                   ['', Validators.required],
      contactEmail:                  ['', [Validators.required, Validators.email]],
      phone:                         [''],
      mobile:                        ['', Validators.required],
      carrierAcceptanceDays:         [''],
      rateRoundingOptions:           ['', Validators.required],
      subscriptionPlanName:          ['', Validators.required],
      subscriptionPlanDuration:      ['', Validators.required],
      subscriptionPlanEffectiveDate: ['', Validators.required]
    })
  }

  ngOnInit() {
  }
}

如何与我的编辑组件共享这些验证要求？

标签： angular

解决方案

创建一个类：

export class Carrier {
  name: string;
  // etc. 

  toFormGroup() {
    return {
      name: [this.name, Validators.required],
      // etc. 
    }
  }
}

现在，您可以在组件中管理它：

carrier = new Carrier();
form = this.formBuilder.group(this.carrier.toFormGroup());

这使您可以将所有对象逻辑集中到一个类中。例如，您可以添加一个persist()对后端进行 HTTP 调用的方法，或者类似的东西。

推荐阅读