Create form using model settings

Overview

To use Angular reactive forms the necessary FormGroup, FormArray, and FormControl form controls must be created. Each of these controls can have validators, async validators, can be disabled, etc. With ng-form-rules you create model settings hierarchically structured properties, which have tests for validity and editability. You can use these model settings to then create the form controls that Angular reactive forms requires.

Details

⚡ View example ⚡

Creating form controls from your model settings is accomplished by calling createFormGroup() from ReactiveFormsRuleService. This function takes an instance of model settings (or the name of a registered model setting) and an initial value (optional) for the form.

constructor(private svc: ReactiveFormsRuleService) {
  const settings = AdhocModelSettings.create<any>(
    // model settings configuration...
  );
  
  // create FormGroup using a model settings instance
  const formGroup1 = this.svc.createFormGroup(settings);
  
  // create FormGroup using registered model settings
  const formGroup2 = this.svc.createFormGroup('my-registered-settings');
  
  // create FormGroup with an initial value
  const formGroup3 = this.svc.createFormGroup(settings, { name: 'Cosmo Kramer' });
}

This creates the root FormGroup to use in your template, which contains form controls perfectly matching the structure of the properties in your model settings. We recursively go through your properties to generate this FormGroup. Properties that have properties of their own will be a FormGroup, properties with an array item property will be a FormArray, and all others will be a simple FormControl. The resulting FormGroup will have these benefits:

• Structure of form controls are created using the properties defined in your model settings
• All property validity and editability test rules (sync and async) are attached to your form controls automatically
• Form controls and dependency property subscriptions will be updated as needed when manipulating controls items in a FormArray
• You can extend the validators, inspect the state of controls, or do anything else you normally would. The created form controls are no different than any you have used before.