1

我有连接到控制值访问器的自定义组件。在这个组件中，我正在动态构建我的表单标签，如输入、文本区域等......

它一切正常 - 但是当我尝试发送嵌套表单组时遇到问题。所以在表单组中形成组。

我已经建立了这个 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 中的一个 formControlregisterFG

现在我需要发送整个formGroup - email_register_group嵌套在我的 mainformGroup - 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

4

1 回答 1

0

每当你想这样做时，你都需要使用 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 {}

}

您可能希望在自定义组件中使用这些方法来使其注册表单组和所有内容。

于 2021-04-23T13:44:15.283 回答