不适用于特定formGroup的Formcontrol绑定

Question

我有反应性表单，并在备用formGroup下看到窗体控件的空值。正如您在下面的标记中所看到的，我添加了属性formGroupName=“备用”，但它似乎不起作用。我也尝试过formGroupName=的“备用”。因此，外部备用的formControls是正确的，是明确的，而不是交替下的。bindings.Could有一些问题，你让我知道问题出在哪里？

ngOnInit(): void {
    this.languageService.alternateLanguageSelected$.subscribe(alternateLanguageSelected => {
      this.alternateLanguageSelected = alternateLanguageSelected;
    });

    this.formGroup = this.formBuilder.group({
      yesNoMultilingualPrincipalAddress: [{ value: false, disabled: this.readonly }],
      yesNoMultilingualMailingAddress: [{ value: false, disabled: this.readonly }],
      yesNoOtherBusinessAddresses: [{ 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)]
      ],
      

      alternate: this.formBuilder.group({
        hasDifferentPrincipalAddress: [{ value: null, disabled: this.readonly }],
        differentPrincipalAddress: [{ value: null, disabled: this.readonly }],      
      }),
    });
    }
    
    
    
<form [formGroup]="formGroup" novalidate>       
    <div class="flex-group">
        <div class="flex-2">
    
          <fieldset class="boxed">
            <legend translate for="hasDifferentPrincipalAddress">details.main-address</legend>
            <app-yes-no [ngClass]="{ submitted: submitted }" name="hasDifferentPrincipalAddress"
              formControlName="hasDifferentPrincipalAddress"></app-yes-no>
            <aa-alert alertClass="error" alertText="{{ 'common.required' | translate }}"
              *ngIf="(form.hasDifferentPrincipalAddress.touched || submitted) && form.hasDifferentPrincipalAddress.errors?.required">
            </aa-alert>
          </fieldset>
    
          <div class="field boxed" *ngIf="this.alternateLanguageSelected && form.hasDifferentPrincipalAddress.value">
            <app-yes-no-multilingual name="yesNoMultilingualPrincipalAddress"
              formControlName="yesNoMultilingualPrincipalAddress" id="yesNoMultilingualPrincipalAddress"
              [description]="'common.yesno-multilingual-text'">
            </app-yes-no-multilingual>
          </div>
    
          <div class="field dependant" *ngIf="form.hasDifferentPrincipalAddress.value">
            <div class="field">
              <app-address formControlName="differentPrincipalAddress" [submitted]="submitted" [englishOnly]="true"></app-address>
            </div>
          </div>
    
         </div>
        </div>
    
        <div class="flex-2">
          <fieldset class="boxed" *ngIf="form.yesNoMultilingualPrincipalAddress.value">
            <legend translate for="hasDifferentPrincipalAddress">details.main-address</legend>
            <app-yes-no [ngClass]="{ submitted: submitted }" name="hasDifferentPrincipalAddress" [formGroupName]="alternate"
              formControlName="hasDifferentPrincipalAddress"></app-yes-no>
          </fieldset>
    
          <div class="field dependant" *ngIf="form.yesNoMultilingualPrincipalAddress.value">
            <div class="field">
              <app-address formControlName="differentPrincipalAddress" [submitted]="submitted" [formGroupName]="alternate"
                [showAlternateLanguageFields]="form.yesNoMultilingualPrincipalAddress.value"></app-address>
            </div>
          </div>
    
        
        </div>
      </div>
</form>

Answer 1

您必须将formGroupName="alternate"设置为<div class="flex-2">。

<div class="flex-2" formGroupName="alternate" >
  <fieldset class="boxed" *ngIf="form.yesNoMultilingualPrincipalAddress.value">
    <legend translate for="hasDifferentPrincipalAddress">details.main-address</legend>
    <app-yes-no [ngClass]="{ submitted: submitted }" name="hasDifferentPrincipalAddress"
      formControlName="hasDifferentPrincipalAddress"></app-yes-no>
  </fieldset>

  <div class="field dependant" *ngIf="form.yesNoMultilingualPrincipalAddress.value">
    <div class="field">
      <app-address formControlName="differentPrincipalAddress" [submitted]="submitted"
        [showAlternateLanguageFields]="form.yesNoMultilingualPrincipalAddress.value"></app-address>
    </div>
  </div>
</div>