如何将嵌套的formGroupName发送到连接到控制值访问器的输入组件

Question

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

它一切都很好，但当我尝试发送嵌套表单组时，我遇到了问题。所以形成一组又一组。

我已经建立了这个表单组

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>

但这只是我的主窗体组registerFG中的一个窗体控件

现在我需要发送整个formGroup - email_register_group，它嵌套在我的主formGroup - registerFG中。

i treid与自定义子组件

父组件

<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) { 

}

连接到控制值访问器的割接组件

@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 -电子邮件注册组`

如这里所建议的：

创建可重复使用的FormGroup

但当我做同样的事情时，i9只得到了内部的控制，而不是表单组

Answer 1

无论何时，您都需要使用Angular提供的ControlValueAccessor。

所以你的代码是这样的：

附言：这不是确切的解决方案，但它满足了您目前的需求

// 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 {}
}

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