Question

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

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() {
  }
}

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

Answer 1

创建一个类：

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调用，或类似的事情。

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

1 个答案: