如何在2個Angular組件之間共享表單驗證

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