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

Question

我在角度应用程序中创建了一个反应形式。 目前，屏幕左侧显示了一组字段。 当用户选择单选按钮时，需要在右侧显示另一组类似的字段

目前字段的声明是这样的

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)]
});

我正在考虑使用下面的备用前缀声明字段。 我不太确定这是否是正确的方法。 只有当用户单击是时，备用字段才需要存在。 尤其是在保存表单时，如果用户没有选择是，则不应生成替代字段，因为它们将包含空值并且没有意义。 此声明中是否有任何条件语句或任何更好的方法来执行此操作。

 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

如果您访问您的form.value它不会显示禁用的表单值。 对于您的用例，添加这些额外的 formControls 然后根据您提到的单选按钮的值有条件地禁用/启用它们是有意义的。

您可以使用该特定表单控件的valueChanges来侦听该值的更改。

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

您还可以将它们嵌套在 formGroup 下，以便更轻松地维护它们的状态。 （因为您可以禁用/启用整个 formGroup 而不是单个控件！）

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

然后，您可以一次性切换整个 formGroup。

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

这将允许您将表单的额外部分包装在基于 formGroup 的条件中。

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

或者，您可以添加/删除该组，但这似乎有点矫枉过正！

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