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

Question

I have components with forms for add/edit functionality. The form fields for both Add and Edit are identical and thus I would like to reuse my form validation in each. I have the following validation setup in my Add class I am exporting:

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

How can I share these validation requirements with my Edit component?

Answer 1

Create a class :

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

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

Now, you can manage it in your components :

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

This allows you to centralize all of your object logic into a single class. For instance, you could add a persist() method that will make an HTTP call to your backend, or things like that.