如何將嵌套的 formGroupName 發送到連接到控制值訪問器的輸入組件？

Question

我有連接到控制值訪問器的自定義組件。 在這個組件中，我正在動態構建我的表單標簽，如輸入、文本區域等......

它一切正常 - 但是當我嘗試發送嵌套表單組時遇到問題。 所以在表單組中形成組。

我已經建立了這個 formGroup

  registerFG = this.builder.group({
    password_register: ['', [Validators.required]],

    email_register_group: this.builder.group({
      email_register: ['', [Validators.required, CustomValidators.emailDomain('yourcompanyname.com')]],
      email_register_confirm: ['', [Validators.required]],
    }),

si 如果我想發送password_register我會在我的父組件中這樣做

  <app-form-group inputType="password" cssTemplate="white" formControlName="password_register" [data]="{ field: 'password_register', label: 'Password' }"></app-form-group>

但這只是我的主要 formGroup registerFG中的一個 formControl

現在我需要發送整個formGroup - email_register_group嵌套在我的主formGroup - registerFG中。

我使用自定義子組件

父組件

<app-sub-form-group formGroupName=email_register_group></app-sub-form-group>

子組件 HTML

<ng-container [formGroup]="controlContainer.control">
       <app-form-group cssTemplate="white" formControlName=email_register [data]="{ field: 'email_register', label: 'Email' }"></app-form-group>
       <app-form-group cssTemplate="white" formControlName=email_register_confirm [data]="{ field: 'email_register_confirm', label: 'Confirm Email' }"></app-form-group>

</ng-container>

子組件 TS

 @Input() public formGroupName: string;
  
  constructor(public controlContainer: ControlContainer) { 
   
  }

連接到控制值訪問器的cutom-component

@Component({
  selector: 'app-form-group',
  templateUrl: './form-group.component.html',
  styleUrls: ['./form-group.component.scss'],
  // providers: [{
  //   provide: NG_VALUE_ACCESSOR,
  //   useExisting: forwardRef(() => FormGroupComponent),
  //   multi: true
  // }
  // ],
  
})
export class FormGroupComponent implements OnInit {
 constructor(@Self() @Optional() public control: NgControl,
  private authService: AuthService, private builder: FormBuilder) {
     // here i keep geting just the ngControl with formControl inside but now the formGroup with
     // two formControls inside
     console.log(control);
  }
}

how can i get my formGroup with two formControls inside - email_register_group`

如此處建議：

創建一個可重用的 FormGroup

但是當我做同樣的事情時，i9 繼續得到里面的控制 - 而不是 formGroup

Answer 1

每當您想這樣做時，您都需要使用 Angular 提供的 ControlValueAccessor。

所以你的代碼原來是這樣的：

PS：這不是確切的解決方案，但它滿足您目前的需求

// You will enable the commented code
@Component({
  selector: 'app-form-group',
  templateUrl: './form-group.component.html',
  styleUrls: ['./form-group.component.scss'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => FormGroupComponent),
    multi: true
  }],
  
})

// Your component should implement CONTROLVALUEACCESSOR
export class FormGroupComponent implements OnInit, ControlValueAccessor {

// Here you will write a couple of methods to enable your custom component to register all the changes 

   /**
   * @param val The current value to be overwritten
   */
  writeValue(val: any): void {
    this.value = val;
  }

  /**
   * @param obj The callback function to register
   */
  registerOnChange(fn: any): void {}

  /**
   * @param obj The callback function to register.
   */
  registerOnTouched(fn: any): void {}

  /**
   * @param isDisabled The disabled status to set on the element.
   */
  setDisabledState?(isDisabled: boolean): void {}

}

您可能希望在自定義組件中使用這些方法來使其注冊表單組和所有內容。