根据反应形式角度中的条件生成表单控件

Question

I have created a reactive form in angular application. Currently there are set of fields shown on the left-hand side of the screen. When the user selects the radio button, another set of similar fields need to be show on the right

At the moment the declaration of the fields is like this

this.formGroup = this.formBuilder.group({
  yesNoMultilingual: [{ value: false, disabled: this.readonly }],
  hasDifferentPrincipalAddress: [{ value: null, disabled: this.readonly }, Validators.required],
  differentPrincipalAddress: [
    { value: null, disabled: this.readonly },
    [conditionalValidator(() => this.form.hasDifferentPrincipalAddress.value, requiredAddress)]
  ],
   
  hasOtherBusinessAddresses: [{ value: null, disabled: this.readonly }, Validators.required],
  otherAddresses: [{ value: null, disabled: this.readonly }, requiredIfValidator(() => this.form.hasOtherBusinessAddresses.value)]
});

I was thinking of declaring the fields with the alternate prefix below. I am not too sure if it is the right way to do it. Only when the user clicks yes the alternate fields need to come into existense. Especially while saving the form and if the user does not select Yes, then the alternate fields shouldn't be generated as they would contain nulls and there is no point. Is there any conditional statement within this declaration or any better way to do this.

 this.formGroup = this.formBuilder.group({
      yesNoMultilingual: [{ value: false, disabled: this.readonly }],
      hasDifferentPrincipalAddress: [{ value: null, disabled: this.readonly }, Validators.required],
alternateHasDifferentPrincipalAddress: [{ value: null, disabled: this.readonly }, Validators.required],
      differentPrincipalAddress: [
        { value: null, disabled: this.readonly },
        [conditionalValidator(() => this.form.hasDifferentPrincipalAddress.value, requiredAddress)]
      ],
      alternateDifferentPrincipalAddress: [
        { value: null, disabled: this.readonly },
        [conditionalValidator(() => this.form.hasDifferentPrincipalAddress.value, requiredAddress)]
      ],
   
      hasOtherBusinessAddresses: [{ value: null, disabled: this.readonly }, Validators.required],
      alternateHasOtherBusinessAddresses: [{ value: null, disabled: this.readonly }, Validators.required],

      otherAddresses: [{ value: null, disabled: this.readonly }, requiredIfValidator(() => this.form.hasOtherBusinessAddresses.value)]
      alternateOtherAddresses: [{ value: null, disabled: this.readonly }, requiredIfValidator(() => this.form.hasOtherBusinessAddresses.value)]

    });

Answer 1

If you access your form.value it will not show disabled form values. For your use case here it would make sense to add these extra formControls & then conditionally disable / enable them based on the radio button's value you have mentioned.

You can listen to the changes in that value using valueChanges for that specific form control.

this.formGroup.get('yesNoMultilingual').valueChanges.subscribe(data => 
    // toggle enable / disable of your formControls
)

You could also nest these under a formGroup to make it easier to maintain their state. (As you can disable/enable the entire formGroup instead of individual controls!)

this.formGroup = this.formBuilder.group({
   // existing formControls
   alternative: this.formBuilder.group({
    alternateDifferentPrincipalAddress: [null], etc etc
  }),
})

You could then toggle of the entire formGroup in one go.

this.form.get('alternative').disable()
this.form.get('alternative').enable()

This would allow you wrap the extra part of your form in a conditional based on the formGroup.

<ng-container *ngIf="formGroup.get('alternative').enabled" formGroupName="alternative">
    // extra form elements
</ng-container>

Alternatively you could add / remove the group but this seems overkill!

this.formGroup.removeControl('alternative')
this.formGroup.addControl('alternative', this.formBuilder.group({
     alternateDifferentPrincipalAddress: [null], etc etc
}))