如何解决Angular 10:如何将 Formarray 子项插入到 Formgroup 父项中
我正在尝试实现响应式和可重用的表单,但我有一个问题:我需要将子组件的 Formarray 插入到父组件的 Formgroup 中, 我按照这个指南来执行过程https://coryrylan.com/blog/building-reusable-forms-in-angular,这是我的 ChildComponent.ts
export interface ReferenciaDocumentosFormValues {
numero: string;
uuid: string;
tipo: string;
fecha: string;
}
@Component({
selector: 'app-referencia-documentos-form',templateUrl: './referencia-documentos-form.component.html',styleUrls: ['./referencia-documentos-form.component.css'],providers: [
{
provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => ReferenciaDocumentosFormComponent),multi: true
},{
provide: NG_VALIDATORS,multi: true
}
]
})
export class ReferenciaDocumentosFormComponent implements OnInit,OnDestroy {
referenciaDocumentosForm: FormGroup;
subscriptions: Subscription[] = [];
get value(): ReferenciaDocumentosFormValues[] {
return this.referenciaDocumentos.value;
}
get referenciaDocumentos(){
return this.referenciaDocumentosForm.get('referenciaDocumentos') as FormArray;
}
set value( value ){
this.referenciaDocumentos.setValue(value);
this.onChage(value);
this.onTouched();
}
constructor( private fb: FormBuilder ) { }
ngOnDestroy(): void {
this.subscriptions.forEach( s => s.unsubscribe());
}
ngOnInit(): void {
this.createReferenciaDocumentosForm();
this.subscriptions.push(
this.referenciaDocumentosForm.valueChanges.subscribe( value => {
this.onChage(value);
this.onTouched();
console.log(this.referenciaDocumentosForm.value);
})
)
console.log(this.referenciaDocumentos);
}
onChage: any = () => {};
onTouched: any = () => {};
registerOnChange(fn: any): void {
this.onChage = fn;
}
writeValue(value): void {
if (value) {
this.value = value;
}
if (value === null) {
this.referenciaDocumentos.reset();
}
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
validate(_: FormControl){
return this.referenciaDocumentosForm.valid ? null : { adquiriente: { valid: false } };
}
createReferenciaDocumentosForm(){
this.referenciaDocumentosForm = this.fb.group({
referenciaDocumentos: this.fb.array([
this.fb.group({
numero: ['',Validators.required],uuid: ['',tipodocumento: ['',fecha: ['',}),]),})
}
getControl ( c: string,i: number ): AbstractControl{
return this.referenciaDocumentos.at(i).get(c);
}
addNewReferencia(){
this.referenciaDocumentos.push(this.fb.group({
numero: ['',}));
}
}
这是我的 parentComponent.ts
@Component({
selector: 'app-formulario-factura',templateUrl: './formulario-factura.component.html',styleUrls: ['./formulario-factura.component.css']
})
export class FormularioFacturaComponent implements OnInit {
mainForm: FormGroup;
constructor( private fb: FormBuilder ) { }
get referenciaDocumentos(){
return this.mainForm.get('referenciaDocumentos') as FormArray;
}
ngOnInit(): void {
this.createForm();
}
createForm(){
this.mainForm = this.fb.group({
adquiriente: [],referenciaDocumentos: []
})
}
}
...我需要这样的 FormGroup 对象
{
"adquiriente": { null },"referenciaDocumentos": [
{
"numero": "123","uuid": null,"tipodocumento": null,"fecha": null
}
]
}
}
但它看起来像这样
{
"adquiriente": { null },"referenciaDocumentos": {
"referenciaDocumentos": [
{
"numero": "123","fecha": null
}
]
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。